JS封装 运动动画

动画实现原理

• 核心原理

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

• 实现步骤

  • 获得盒子当前位置
  • 让盒子在当前位置加上1个移动距离
  • 利用定时器不断重复这个操作
  • 加一个结束定时器的条件
  • 注意此元素需要添加定位，才能使用element.style.left

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

• 核心原理
  • 利用JS是一门动态语言，可以很方便的给当前对象添加属性。
  • 如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。

    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';
        }, 30);
    }

    move.addEventListener('click', function(){
        animate(inner, container.scrollWidth-inner.scrollWidth);
    })
    stop.addEventListener('click', function(){
        animate(inner, 0);
    });

缓动效果原理

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

  • 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
  • 核心算法： (目标值 - 现在的位置)   /  10    做为每次移动的距离步长
  • 停止的条件是：让当前盒子位置等于目标位置就停止定时器
  • 注意步长值需要取整

• 动画函数多个目标值之间移动

  • 当我们点击按钮时候，判断步长是正值还是负值
  • 如果是正值，则步长往大了取整
  • 如果是负值，则步长向小了取整

• 动画函数添加回调函数

  • 回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
  • 回调函数写的位置：定时器结束的位置。

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}