【PC端网页特效】03-动画函数的封装

动画实现原理

简单动画函数封装

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

        //简单动画函数封装obj目标对象 target目标位置
        function animate(obj, target) {
            var timer = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    //停止动画，本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 5 + 'px';//offsetLeft用来获取位置，style用来赋值，注意加单位px
            }, 30);
        }
        var div = document.querySelector('div');
        //调用函数
        animate(div, 300);

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

上边的代码还有很多不足：

1. 每次调用函数，都会在内存中开辟内存空间，浪费内存资源
2. 定时器的名字一样，容易引起歧义
3. 需要一个触发事件来调用函数

优化后代码：

		//简单动画函数封装obj目标对象 target目标位置
        function animate(obj, target) {
            //核心原理：js是动态语言，可以很方便的给对象加属性
            //还有一个问题就是，加了按钮后，如果不断点击按钮，元素运动得会越来越快，这是因为开启了多个定时器
            //解决方案就是先清除之前的定时器，只开启一个定时器
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    //停止动画，本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 5 + 'px';//offsetLeft用来获取位置，style用来赋值，注意加单位px
            }, 30);
        }
        var div = document.querySelector('div');
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            //调用函数
            animate(div, 300);
        })

缓动动画

之前的动画都是匀速动画，为了让用户体验感更好，我们还需要使用缓动动画

缓动动画原理

• 缓动动画基本代码：

  		//简单动画函数封装obj目标对象 target目标位置
        function animate(obj, target) {
            //核心原理：js是动态语言，可以很方便的给对象加属性
            //还有一个问题就是，加了按钮后，如果不断点击按钮，元素运动得会越来越快，这是因为开启了多个定时器
            //解决方案就是先清除之前的定时器，只开启一个定时器
            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);
                }
                //通过步长公式
                obj.style.left = obj.offsetLeft + step + 'px';//offsetLeft用来获取位置，style用来赋值，注意加单位px
            }, 30);
        }
        var div = document.querySelector('div');
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            //调用函数
            animate(div, 300);
        })

缓动动画添加回调函数

• 回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当另一个函数执行完毕，就会执行传入的函数，这个过程叫做回调

• 回调函数写到定时器结束的位置

        //简单动画函数封装obj目标对象 target目标位置
        function animate(obj, target, callback) {
            //核心原理：js是动态语言，可以很方便的给对象加属性
            //还有一个问题就是，加了按钮后，如果不断点击按钮，元素运动得会越来越快，这是因为开启了多个定时器
            //解决方案就是先清除之前的定时器，只开启一个定时器
            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';//offsetLeft用来获取位置，style用来赋值，注意加单位px
            }, 30);
        }
        var div = document.querySelector('div');
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            //调用函数
            animate(div, 300, function () {
                div.style.backgroundColor = 'pink';
            });
        })

总结

以上就是动画函数的封装，在具体使用的时候，我们就可以将其封装成一个js文件，需要的时候就可以直接引用