动画函数封装

动画函数封装

1.动画实现原理

核心原理∶通过定时器setlnterval)不断移动盒子位置。

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

<style>
        div {
        /* 注意：一定要添加定位 */
            position: absolute;
            top: 0;
            left: 0;
            height: 100px;
            width: 100px;
            background-color: skyblue;
        }
</style>

<div>第一个盒子,到400时停下</div>
    <script>
        // 1.获得盒子当前位置
        // 2.让盒子在当前位置加上1个移动距离
        // 3.利用定时器不断重复这个操作
        // 4.加一个结束定时器的条件
        // 5.注意此元素需要添加定位，才能使用element.style.left
        var div = document.querySelector('div');
        var timer = setInterval(function() {
            if (div.offsetLeft >= 400) {
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 5 + 'px';
        }, 30);
    </script>

2.动画函数简单封装

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

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

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

 <style>
        div {
            /* 注意：一定要添加定位 */
            position: absolute;
            left: 0px;
            height: 100px;
            width: 100px;
            background-color: skyblue;
        }
        
        span {
            position: absolute;
            top: 150px;
            left: 0;
            display: block;
            height: 100px;
            width: 100px;
            background-color: orange;
        }
    </style>

<button>让第二个盒子开始移动</button>
    <div>第一个盒子,到400时停下</div>
    <span>第二个盒子，到300时停下</span>
    <script>
        // var obj = {};
        // obj.name = 'andy';
        // 简单动画函数封装obj目标对象 target 目标位置
        // 给不同的元素指定了不同的定时器
        function animate(obj, target) {
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 5 + 'px';
            }, 30);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        // 调用函数
        animate(div, 400);
        btn.addEventListener('click', function() {
            animate(span, 300);
        })
    </script>