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';

            })
        })