JS 动画笔记

动画实现原理

    核心原理:通过定时器setInterval()不断地移动盒子的位置

缓动动画原理

    缓动的核心算法~~~~~~~~~~(目标值-现在的位置)/10

    停止的条件是~~~~~~让当前盒子的位置等于目标位置就停止定时器

    匀速动画~~~~~~~~盒子当前的位置+固定值 10

    缓动动画~~~~~~~~盒子当前的位置+变化的值(目标值-现在的位置)/10

动画函数添加回调函数

    回调函数的原理:函数可以做为一个参数.将这个函数作为参数传递到另外一个函数里面,当那个函数执行完以后,再执行进去的函数,这个过程叫做回调;

    动画函数封装到单独的JS文件里面

    这样以后经常使用这个动画函数就直接调用文件就可以了

 function animate(obj, target, callback) {
             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)
                     // 回调函数写在定时器结束后面
                     if (callback) {
                         callback();
                     }
                 }
                 // 把里面的移动值改为慢慢变小的值
                 obj.style.left = obj.offsetLeft + step + 'px'
             }, 15)
         }
 animate(div, 700)
         btn1.addEventListener('click', function () {
             // 当我们不断地点击按钮就会开启越来越多的定时器
             animate(box, 700)
         })
         btn2.addEventListener('click', function () {
             // 当我们不断地点击按钮就会开启越来越多的定时器
             animate(box, 900, function () {
                 box.style.backgroundColor = 'red';

             })
         })