JS div匀速移动动画与变速移动动画代码实例

关于JS div匀速移动动画与变速移动动画代码实例，我为你提供以下攻略。

1. 匀速移动动画

匀速移动动画的实现方法常见的有两种方式：

（1）通过定时器 setInterval() 不断执行移动过程

function moveBySetInterval(ele, speed) {
    clearInterval(ele.timerId);
    ele.timerId = setInterval(function() {
        var left = ele.offsetLeft + speed;
        ele.style.left = left + "px";
    }, 20);
}

该函数实现了当传入元素ele和速度speed之后，不断地将元素向右移动。其中，setInterval() 是定时器函数，通过将 setInterval() 返回的ID存储在元素上，可以方便后续调用 clearInterval() 来停止定时器，比如在动画结束时调用 clearInterval()。

（2）通过递归调用自身实现

function moveByTimeout(ele, target, step) {
    var left = ele.offsetLeft;
    if (left == target) {
        return;
    }
    if (left < target) {
        step = Math.abs(step);
    } else {
        step = -Math.abs(step);
    }
    ele.style.left = left + step + "px";
    setTimeout(function() {
        moveByTimeout(ele, target, step);
    }, 20);
}

该函数实现了通过计算元素的当前位置和目标位置之间的差值，来确定元素的移动方向和移动距离。通过不断递归调用自身，并在每次回调中改变元素的位置，来实现元素的移动。setTimeout() 是定时器函数，通过将 setTimeout() 返回的ID存储在函数内部的变量中，可以方便后续调用 clearTimeout() 来停止定时器，比如在动画结束时调用 clearTimeout()。

2. 变速移动动画

变速移动动画通常是通过缓动函数来实现的，缓动函数可以按照预设的规则调整元素在动画过程中的移动速度，以达到更加自然、顺畅的效果。其中，常见的缓动函数有：线性、加速、减速、弹性等等。

以实现简单的弹性动画为例：

function elasticEaseInOut(pos) {
    if (pos == 0 || pos == 1) {
        return pos;
    }
    var c = 0.3, // 抖动幅度
        t = 1 - pos,
        b = 1 - Math.pow(c, 10 * t),
        d = 1;
    return 1 - b;
}

function moveByElastic(ele, target, duration) {
    var left = ele.offsetLeft,
        distance = target - left,
        speed = 0,
        start = Date.now();
    (function step() {
        var timePassed = Date.now() - start,
            progress = Math.min(timePassed / duration, 1),
            pos = elasticEaseInOut(progress);
        if (pos == 1) {
            clearInterval(ele.timerId);
        } else {
            speed = pos * distance - ele.offsetLeft;
            ele.style.left = ele.offsetLeft + speed + "px";
            setTimeout(step, 20);
        }
    })();
}

该函数实现了一个简单的弹性缓动函数（elasticEaseInOut），该弹性函数用于计算元素在动画过程中的速度系数。在 moveByElastic() 函数中，通过计算元素当前位置和目标位置之间的距离和时间差，来确定移动速度，并通过不断调用 setTimeout() 来实现元素的移动。其中，speed 属性是根据弹性函数（elasticEaseInOut）计算得出的移动速度，进而用于改变元素位置。通过使用弹性函数，在元素移动的时候，在不同的位置上增加抖动幅度，让移动看起来更加自然。

以上是JS div匀速移动动画与变速移动动画代码实例的攻略，希望对你有所帮助。