原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】

2023年5月28日上午10:11 • JavaScript

下面是对原生JavaScript运动函数的封装示例的详细攻略。

一、运动函数的封装

经常使用的运动函数有匀速运动、缓动运动、抛物线运动等。将这些运动函数封装成通用的函数，可以提高代码的复用性。下面是一个基本的运动函数的封装。

function move(obj, attr, target, duration, fx, callback) {
    var startTime = Date.now();  // 记录起始时间
    var startVal = parseInt(getStyle(obj, attr));  // 获取初始值
    var distance = target - startVal;  // 计算总距离
    var times = Math.ceil(duration / 16.7);  // 计算运动次数
    var t = 0;  // 记录当前次数

    clearInterval(obj.timer);  // 清除之前可能存在的定时器

    obj.timer = setInterval(function () {
        t++;
        if (t > times) {
            clearInterval(obj.timer);
            callback && callback();  // 运动结束后执行回调函数
        } else {
            var val = fx(t,  startVal, distance, times);  // 根据运动曲线计算当前值
            obj.style[attr] = val + 'px';  // 将当前值设置给运动对象
        }
    }, 16.7);  // 每隔16.7ms计算一次运动状态
}

参数说明：

obj: 运动的DOM对象
attr: 运动的CSS属性
target: 运动的目标值
duration: 运动的总时间
fx: 运动曲线，可选。默认为匀速运动。
callback: 运动结束后执行的回调函数，可选。

二、匀速运动示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匀速运动示例</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        function linear(t, b, c, d) {
            return c * t / d + b;
        }
        function getStyle(obj, attr) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(obj, null)[attr];
            } else {
                return obj.currentStyle[attr];
            }
        }
        var box = document.getElementById('box');
        move(box, 'left', 300, 2000, linear);
    </script>
</body>
</html>

使用上面封装的运动函数，可以通过将fx参数设置为linear，实现匀速运动。

三、抛物线运动示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抛物线运动示例</title>
    <style>
        #box {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        function parabola(t, b, c, d) {
            return c * Math.pow((t / d), 2) + b;
        }
        var box = document.getElementById('box');
        move(box, 'left', 300, 2000, parabola);
        move(box, 'top', 300, 2000, parabola);
    </script>
</body>
</html>

上面的示例演示了如何通过将fx参数设置为parabola，实现抛物线运动。需要注意的是，抛物线运动是有两个方向的，这里我们分别运动了水平和垂直方向。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】 - Python技术站