JavaScript基础——动画函数封装

动画函数简单封装

主义函数需要传递2个参数，动画对象和移动到的距离

function animate(obj, target, pos = undefined) {
    // obj是动画对象，target是目标距离，pos是定位方式。
    if (obj.style.position != '' && pos == undefined);
    else if (pos == undefined) obj.style.position = 'relative';
    else obj.style.position = pos;

    var timer = setInterval(function() {
        if (obj.offsetLeft >= target) {
            clearInterval(timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
    }, 10);
}

动画函数给不同元素记录不同定时器

如果多个元素都使用这个动画函数，每次都要var声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
核心原理：利用js是一门动态语言，可以很方便的给当前对象添加属性。
可以利用这一规则，优化上面的代码，如下所示:

function animate(obj, target, pos = undefined) {
    ...
    obj.timer = setInterval(function() {
        if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
        }
        ...
    }, 10);
}

上述代码其实还有一个问题，如果动画函数被调用多次，那么每次都会新建一个定时器，解决的办法就是在创建定时器之前清空定时器。如下所示

function animate(obj, target, pos = undefined) {
    ...
    clearInterval(obj.timer);
    ...
}

缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法：(目标值-现在的位置)/10 作为移动距离的步长。
3. 停止条件：让当前盒子位置等价于目标位置就停止定时器。
   
   

动画函数添加回调元素

ex(回调函数元素)ex函数可以作为一个参数。将这个函数作为参数传递到另一个参数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。