动画原理

4. 动画原理

4.1 动画实现原理

<style>
        div {
            /* 此元素需要添加定位，才能使用 element.style.left */
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

var div = document.querySelector('div');
        // setInterval 是不断运作的定时器
        var timer = setInterval(function() {
            if (div.offsetLeft >= 400) {
                // 停止动画 本质是停止定时器
                clearInterval(timer);
            }
            // div.offsetLeft只能获取 不能赋值 所以用 div.style.left 来赋值
            div.style.left = div.offsetLeft + 1 + 'px';
        }, 30); //每隔30毫秒 运行一次 +1px 操作

4.2 简单动画函数封装

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

obj 目标对象 target 目标位置

function animate(obj, target) {
            var timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');

        // 调用函数
        animate(div, 300); // 300表示 目标位置 target 到300px 动画就停止
        animate(span, 200);

4.3 给不同对象添加不同定时器

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

 // 给不同的元素指定了不同的定时器
        function animate(obj, target) {
            // 当我们不断的点击按钮，这个元素的速度只会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行  每次点击按钮执行时 都先清除上次的定时器 否则会加快运作
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.timer >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 30);
        }

        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        // 调用函数
        animate(div, 300);
        btn.addEventListener('click', function() {
            animate(span, 200);
        })