js匀速动画及动画库

今天药忘吃喽~ 2022-06-07 00:53 218阅读 0赞

使用定时器分为两步：设置定时器、设置等待时间

window.setInterval([function],[interval]); //设置一个定时器，到达指定的时间，每隔这么长时间都重复执行[function]
    window.setTimeOut([function],[interval]); //只执行一次

定时器返回的是一个数字，代表当前是第几个定时器  
清除定时器：

window.clearTimeOut(1); //数字表示清除掉第几个
    window.clearInterval(timer2);

<table> 
 <tbody> 
  <tr> 
   <td>2.获取屏幕的宽高（兼容所有浏览器）</td> 
  </tr> 
 </tbody> 
</table>

var curWidth = document.documentElement.clientWidth || document.body.clientWidth; //获取当前屏幕的宽度
    var curHeight = document.documentElement.clientHeight || document.body.clientHeight; //获取当前屏幕的高度

<table> 
 <tbody> 
  <tr> 
   <td><b>1.在指定时间内实现单方向匀速运动</b></td> 
  </tr> 
 </tbody> 
</table>

让蓝色方块向右匀速运动，2s后到达屏幕右侧，每10ms走一步，如图所示：  
![这里写图片描述][SouthEast]  
（1）通过计算步长来实现：  
示意图：  
![这里写图片描述][SouthEast 1]

（2）通过计算每次运动的距离来实现：  
![这里写图片描述][SouthEast 2]

<table> 
 <tbody> 
  <tr> 
   <td><b>2.在指定步长内实现单方向匀速运动</b></td> 
  </tr> 
 </tbody> 
</table>

让蓝色方块向右匀速运动，步长为5，到达屏幕右侧  
注意边界问题：

<table> 
 <tbody> 
  <tr> 
   <td><b>3.使用setTimeout以及递归的方法实现</b></td> 
  </tr> 
 </tbody> 
</table>

使用setTimeout设置动画，每一次在执行动画之前首先把上一次设置的那个没用的定时器清除掉，节约内存空间

<table> 
 <tbody> 
  <tr> 
   <td><b>4.反弹运动动画</b></td> 
  </tr> 
 </tbody> 
</table>

写两个按钮，控制着方块向左和向右，如图：  
![这里写图片描述][SouthEast 3]

但是这样写性能不好，因为每一次到达时间的时候，都要先执行一次匿名函数，形成一个私有作用域，在匿名函数中再执行move。但是move中需要用到的数据值在第一次执行的move方法中，需要把匿名函数形成的这个私有作用域作为跳板找到之前的，这样就导致了匿名函数形成的这个私有作用域不能销毁。  
解决方法：可以在move()中嵌套一个\_move()方法

<table> 
 <tbody> 
  <tr> 
   <td><b>5.多方向匀速运动</b></td> 
  </tr> 
 </tbody> 
</table>

top和left同时改变  
![这里写图片描述][SouthEast 4]

<table> 
 <tbody> 
  <tr> 
   <td><b>6.创建运动动画库</b></td> 
  </tr> 
 </tbody> 
</table>

~function () { 
        var tweenEffect = {
            //匀速
            Linear: function (t, b, c, d) { 
                return c * t / d + b;
            },
    
            //指数衰减的反弹缓动
            Bounce: {
                easeIn: function (t, b, c, d) { 
                    return c - tweenEffect.Bounce.easeOut(d - t, 0, c, d) + b;
                },
                easeOut: function (t, b, c, d) { 
                    if ((t /= d) < (1 / 2.75)) {
                        return c * (7.5625 * t * t) + b;
                    } else if (t < (2 / 2.75)) {
                        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
                    } else if (t < (2.5 / 2.75)) {
                        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
                    } else {
                        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
                    }
                },
                easeInOut: function (t, b, c, d) { 
                    if (t < d / 2) {
                        return tweenEffect.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
                    }
                    return tweenEffect.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
                }
            },
    
            //二次方的缓动
            Quad: {
                easeIn: function (t, b, c, d) { 
                    return c * (t /= d) * t + b;
                },
                easeOut: function (t, b, c, d) { 
                    return -c * (t /= d) * (t - 2) + b;
                },
                easeInOut: function (t, b, c, d) { 
                    if ((t /= d / 2) < 1) {
                        return c / 2 * t * t + b;
                    }
                    return -c / 2 * ((--t) * (t - 2) - 1) + b;
                }
            },
    
            //三次方的缓动
            Cubic: {
                easeIn: function (t, b, c, d) { 
                    return c * (t /= d) * t * t + b;
                },
                easeOut: function (t, b, c, d) { 
                    return c * ((t = t / d - 1) * t * t + 1) + b;
                },
                easeInOut: function (t, b, c, d) { 
                    if ((t /= d / 2) < 1) {
                        return c / 2 * t * t * t + b;
                    }
                    return c / 2 * ((t -= 2) * t * t + 2) + b;
                }
            },
    
            //四次方的缓动
            Quart: {
                easeIn: function (t, b, c, d) { 
                    return c * (t /= d) * t * t * t + b;
                },
                easeOut: function (t, b, c, d) { 
                    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
                },
                easeInOut: function (t, b, c, d) { 
                    if ((t /= d / 2) < 1) {
                        return c / 2 * t * t * t * t + b;
                    }
                    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
                }
            },
    
            //五次方的缓动
            Quint: {
                easeIn: function (t, b, c, d) { 
                    return c * (t /= d) * t * t * t * t + b;
                },
                easeOut: function (t, b, c, d) { 
                    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
                },
                easeInOut: function (t, b, c, d) { 
                    if ((t /= d / 2) < 1) {
                        return c / 2 * t * t * t * t * t + b;
                    }
                    return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
                }
            },
    
            //正弦曲线的缓动
            Sine: {
                easeIn: function (t, b, c, d) { 
                    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
                },
                easeOut: function (t, b, c, d) { 
                    return c * Math.sin(t / d * (Math.PI / 2)) + b;
                },
                easeInOut: function (t, b, c, d) { 
                    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
                }
            },
    
            //指数曲线的缓动
            Expo: {
                easeIn: function (t, b, c, d) { 
                    return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
                },
                easeOut: function (t, b, c, d) { 
                    return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
                },
                easeInOut: function (t, b, c, d) { 
                    if (t == 0) return b;
                    if (t == d) return b + c;
                    if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                    return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
                }
            },
    
            //圆形曲线的缓动
            Circ: {
                easeIn: function (t, b, c, d) { 
                    return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
                },
                easeOut: function (t, b, c, d) { 
                    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
                },
                easeInOut: function (t, b, c, d) { 
                    if ((t /= d / 2) < 1) {
                        return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
                    }
                    return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
                }
            },
    
            //超过范围的三次方缓动
            Back: {
                easeIn: function (t, b, c, d, s) { 
                    if (s == undefined) s = 1.70158;
                    return c * (t /= d) * t * ((s + 1) * t - s) + b;
                },
                easeOut: function (t, b, c, d, s) { 
                    if (s == undefined) s = 1.70158;
                    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
                },
                easeInOut: function (t, b, c, d, s) { 
                    if (s == undefined) s = 1.70158;
                    if ((t /= d / 2) < 1) {
                        return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
                    }
                    return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
                }
            },
    
            //指数衰减的正弦曲线缓动
            Elastic: {
                easeIn: function (t, b, c, d, a, p) { 
                    if (t == 0) return b;
                    if ((t /= d) == 1) return b + c;
                    if (!p) p = d * .3;
                    var s;
                    !a || a < Math.abs(c) ? (a = c, s = p / 4) : s = p / (2 * Math.PI) * Math.asin(c / a);
                    return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                },
                easeOut: function (t, b, c, d, a, p) { 
                    if (t == 0) return b;
                    if ((t /= d) == 1) return b + c;
                    if (!p) p = d * .3;
                    var s;
                    !a || a < Math.abs(c) ? (a = c, s = p / 4) : s = p / (2 * Math.PI) * Math.asin(c / a);
                    return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
                },
                easeInOut: function (t, b, c, d, a, p) { 
                    if (t == 0) return b;
                    if ((t /= d / 2) == 2) return b + c;
                    if (!p) p = d * (.3 * 1.5);
                    var s;
                    !a || a < Math.abs(c) ? (a = c, s = p / 4) : s = p / (2 * Math.PI) * Math.asin(c / a);
                    if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                    return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
                }
            }
        };
    
        function move(curEle, target, duration, effect, callback) {  //让哪个元素运动
            var tempEffect = tweenEffect.Linear;
            if (typeof effect == 'number') {
                switch (effect) {
                    case 0:
                        tempEffect = tweenEffect.Linear;
                        break;
                    case 1:
                        tempEffect = tweenEffect.Bounce.easeIn;
                        break;
                    case 2:
                        tempEffect = tweenEffect.Quart.easeInOut;
                }
            } else if (effect instanceof Array) {
                tempEffect = effect.length >= 2 ? tweenEffect[effect[0]][effect[1]] : tweenEffect[effect[0]];
            } else if (typeof effect == 'function') { //用来做回调函数
                callback = effect;
            }
    
    
            //根据target获取每一个方向的起始值和总距离
            //首先清除定时器
            window.clearInterval(curEle.tweenTimer);
            var begin = {};
            var change = {};
            var time = 0;
            var interval = 10;
            for (var key in target) {
                if (target.hasOwnProperty(key)) {
                    begin[key] = utils.getCss(curEle, key);
                    change[key] = target[key] - begin[key];
                }
            }
            curEle.tweenTimer = window.setInterval(function () { 
                time += interval;
                if (time >= duration) { //到达目标
                    window.clearInterval(curEle.tweenTimer);
                    utils.setGroupCss(curEle, target);
                    typeof callback == 'function' && callback.call(curEle); //回调函数判断
                    return;
                }
                //没到达目标,分别获取每个方向，然后并且设置
                for (var key in target) {
                    if (target.hasOwnProperty(key)) {
                        var curPosi = tempEffect(time, begin[key], change[key], duration);
                        utils.setCss(curEle, key, curPosi);
                    }
                }
            }, interval);
        }
    
        //可以用return返回出来个一个对象，或者直接赋值给window
        window.tweenAnimate = move;
    
    }();

[SouthEast]: /images/20220607/35a094f2de8d44639ae8d484755e26ef.png
[SouthEast 1]: /images/20220607/8a87f00d41ae4dba9a2ff01418199a94.png
[SouthEast 2]: /images/20220607/7144969cbe164149a58e05cb52bb053d.png
[SouthEast 3]: /images/20220607/e0bce746e1ed431aaf567f1cd4ae4881.png
[SouthEast 4]: /images/20220607/7645c99883a5483889ecf6177307f37d.png