JavaScript—动画

一、动画原理

通过定时器setInterval不断移动盒子位置。

步骤：

获得盒子当前位置；
让盒子在当前位置加上1个移动距离；
利用定时器不断重复这个操作；
结束定时器。

注意：元素需要加定位。

例：

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
    </head>
        <div class="move">
            
        </div>
        <script src="js/js.js"></script>
    </body>
</html>

CSS代码：

.move{
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute;
    left: 0;
};

JS代码：

var div = document.querySelector('.move');        //获取需要移动的元素
var timer = setInterval(function() {            //新建一个定时器
    if (div.offsetLeft >= 400) {                //停止定时器的条件：移动距离大于等于400px时停止
        clearInterval(timer);                    //停止定时器
    };
    div.style.left = div.offsetLeft + 1 + 'px';    //定时器执行的操作：每1毫秒移动一个像素
};, 1)

二、简单动画函数封装

注意函数需要传递的2个参数：动画对象和移动的距离。

function animate(obj,target) {
    var timer = setInterval(function() {
        if (obj.offsetLeft >= target) {
            clearInterval(timer);
        };
        obj.style.left = obj.offsetLeft + 1 + 'px';
    };, 1)
};
var div = document.querySelector('.move');    //获取元素
animate(div,300);                            //调用函数

三、给不同元素记录不同定时器

function animate(obj,target) {
    clearInterval(obj.timer);                //一个元素同时只能存在一个定时器
    obj.timer = setInterval(function() {    //给不同元素添加定时器
        if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
        };
        obj.style.left = obj.offsetLeft + 1 + 'px';
    };, 1)
};

四、缓动效果原理

缓动动画就是让元素运动速度有所变化，如常见的“慢慢停下来”。

思路：

让盒子每次移动的距离变小，速度就会慢下来；
核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离步长；

function animate(obj,target) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
        };
        obj.style.left = obj.offsetLeft + step + 'px';
    };, 15)
};