美文网首页js技术交流Web前端之路
原生JavaScript中动画与特效的实现原理

原生JavaScript中动画与特效的实现原理

作者: xiaoxiao昱 | 来源:发表于2017-04-10 21:09 被阅读535次

    原文地址:原生JavaScript中动画与特效的实现原理 转载请注明出处

    现如今,许多页面上均有一些动画效果。适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性。

    实现页面动画的途径一般有两种。

    • 一种是通过操作JavaScript间接操作CSS样式,每隔一段时间更新一次
    • 一种是直接通过CSS定义动画。第二种方法在CSS3成熟之后被广泛采用。

    我们今天只讲第一种实现方式。

    一、JavaScript中动画原理

    ​ 所谓的动画,就是通过一些列的运动形成的动的画面。在网页中,我们可以通过不断的改变元素的css值,来达到动的效果。

    ​ JavaScript的动画用的最多的3个api就是setInterval()、setTimeout()和requestAnimationFrame()

    ​ 据说,普通人眼能看到1/24秒,就是说1秒至少24帧,每次移位间隔需要小于1000/24=41.7毫秒,也就说setInterval要每隔至少40毫秒执行一次,一般地,我们采用10毫秒,当然间隔时间越短,客户端执行计算次数就越多,如果你code计算量大则可以适当调长些。

    1.1 setTimeout()和setInterval ()

    1.2 requestAnimationFrame(回调函数)

    ​ 像setTimeout、setInterval一样,requestAnimationFrame是一个全局函数。调用requestAnimationFrame后,它会要求浏览器根据自己的频率进行一次重绘,它接收一个回调函数作为参数,在即将开始的浏览器重绘时,会调用这个函数,并会给这个函数传入调用回调函数时的时间作为参数。由于requestAnimationFrame的功效只是一次性的,所以若想达到动画效果,则必须连续不断的调用requestAnimationFrame,就像我们使用setTimeout来实现动画所做的那样。requestAnimationFrame函数会返回一个资源标识符,可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调。跟setTimeout的clearTimeout很相似啊。

    ​ 可以这么说,requestAnimationFrame是setTimeout的性能增强版。

    ​ 有一点需要注意的是,requestAnimationFrame不能自行指定函数运行频率,而是有浏览器决定刷新频率。所以这个更能达到浏览器所能达到的最佳动画效果了。

    ​ 这个方法不是所有的浏览器都兼容。

    div{
      width: 100px;
      height: 100px;
      background-color: #f00;
      position: absolute;
    }
    
    <div id="div"></div>
    
    <script type="text/javascript">
        var id;
        function step() {
            var temp = div.offsetLeft + 2;
            div.style.left = temp + "px";
            //和setTimeout一样,要手动调用才能实现连续动画。
            id = window.requestAnimationFrame(step);  //返回值是一个id,可以通过这个id来取消
        }
        id = window.requestAnimationFrame(step);
        //取消回调函数
        window.cancelAnimationFrame(step);
    </script>
    

    1.3 简单动画的问题

    1.3.1 setTimeout和setInterval深入理解

    ​ 我们知道JavaScript试单线程的产物,两个函数就是利用了插入代码的方式实现了伪异步,和AJAX的原理实际上是一样的。

    console.log("1");
    setTimeout(function(){
      console.log("3")
     },0);
     console.log("2");
    //输出结果是什么?
    //1 2 3
    
    function fn() {
    setTimeout(function(){
        console.log('can you see me?');
    },1000);
    while(true) {}
    }
    //输出结果是什么?
    

    1.3.2 简单动画的变慢问题

        function step() {
            var temp = div.offsetLeft + 2;
            div.style.left = temp + "px";
            window.requestAnimationFrame(step);
            for (var i = 0; i < 50000; i++) {
                console.log("再牛逼的定时器也得等到我执行完才能执行")
            }   
        }
        window.requestAnimationFrame(step);
    

    1.4 使用动画的正确姿势

    ​ 动画其实是 “位移”关于“时间”的函数:s=f(t)

    ​ 所以不该采用增量的方式来执行动画,为了更精确的控制动画,更合适的方法是将 动画与时间关联起来

    function startAnimation() {
      var startTime = Date.now();
      requestAnimationFrame(function change() {
        var current = Date.now() - startTime;
        console.log("动画已执行时间" + current);
        requestAnimationFrame(change);
      });
    }
    startAnimation();
    

    动画通常情况下有终止时间,如果是循环动画,我们也可以看做特殊的——当动画达到终止时间之后,重新开始动画。因此,我们可以将动画时间归一(Normalize)表示:

    //duration 是动画执行时间   isLoop是否为循环执行。
    function startAnimation(duration, isLoop){
      var startTime = Date.now();
    
      requestAnimationFrame(function change(){
        // 动画已经用去的时间占总时间的比值
        var p = (Date.now() - startTime) / duration;
    
        if(p >= 1.0){
          if(isLoop){ // 如果是循环执行,则开启下一个循环周期。并且把开始时间改成上个周期的结束时间
            startTime += duration;
            p -= 1.0; //动画进度初始化
          }else{
            p = 1.0;    //如果不是循环,则把时间进度至为 1.0 表示动画执行结束
          }
        }
        console.log("动画已执行进度", p);
        if(p < 1.0){ //如果小于1.0表示动画还诶有值完毕,继续执行动画。
          requestAnimationFrame(change);
        }
      });
    }
    

    示例1:用时间控制动画周期精确到2s中

    block.addEventListener("click", function() {
      var self = this,
          startTime = Date.now(),
          duration = 2000;
      setInterval(function() {
        var p = (Date.now() - startTime) / duration;
        // 时间已经完成了2000的比例,则360度也是进行了这么个比例。
        self.style.transform = "rotate(" + (360 * p) + "deg)";
      }, 100);
    });
    

    示例2:让滑块在2秒内向右匀速移动600px

    block.addEventListener("click", function(){
      var self = this, 
          startTime = Date.now(),
          distance = 600, 
          duration = 2000;
    
      requestAnimationFrame(function step(){
        var p = Math.min(1.0, (Date.now() - startTime) / duration);
        self.style.transform = "translateX(" + (distance * p) +"px)";
        if(p < 1.0) {
          requestAnimationFrame(step);
        }
      });
    });
    

    二、常见动画效果实现

    2.1 匀速水平运动

    ​ 用时间来控制进度
    $$
    s = S*p
    $$

    2.2 匀加速(减速)运动

    加速度恒定,速度从0开始随时间增加而均匀增加。

    匀加速公式:大写S:要移动的总距离 p:归一化的时间进度
    $$
    s = S*p^2
    $$

    // 2s中内匀加速运动2000px
    block.addEventListener("click", function() {
            var self = this,
                startTime = Date.now(),
                distance = 1000,
                duration = 2000;
            requestAnimationFrame(function step() {
                var p = Math.min(1.0, (Date.now() - startTime) / duration);
                self.style.transform = "translateX(" + (distance * p * p) + "px)";
                if(p < 1.0) requestAnimationFrame(step);
            });
        });
    

    匀减速运动公式
    $$
    s=Sp(2-p)
    $$

    //2s中使用速度从最大匀减速到0运动1000px
    block.addEventListener("click", function(){
      var self = this, startTime = Date.now(),
          distance = 1000, duration = 2000;
      requestAnimationFrame(function step(){
        var p = Math.min(1.0, (Date.now() - startTime) / duration);
        self.style.transform = "translateX(" 
          + (distance * p * (2-p)) +"px)";
        if(p < 1.0) requestAnimationFrame(step);
      });
    });
    

    课堂练习:小球的自由落体运动

    2.3 水平抛物运动

    ​ 匀速水平运动和自由落体运动的组合。

    block.addEventListener("click", function(){
      var self = this, startTime = Date.now(),
          disX = 1000, disY = 1000, 
          duration = Math.sqrt(2 * disY / 10 / 9.8) * 1000;   // 落到地面需要的时间  单位ms
        //假设10px是1米,disY = 100米
    
      requestAnimationFrame(function step(){
        var p = Math.min(1.0, (Date.now() - startTime) / duration);
        var tx = disX * p;  //水平方向是匀速运动
        var ty = disY * p * p;  //垂直方向是匀加速运动
    
        self.style.transform = "translate(" 
          + tx + "px" + "," + ty +"px)";
        if(p < 1.0) requestAnimationFrame(step);
      });
    });
    

    2.4 正弦曲线运动

    正弦运动:x方向匀速,垂直方向是时间t的正弦函数

    block.addEventListener("click", function(){
      var self = this, startTime = Date.now(),
          distance = 800, 
          duration = 2000; 
    
      requestAnimationFrame(function step(){
        var p = Math.min(1.0, (Date.now() - startTime) / duration);
        var ty = distance * Math.sin(2 * Math.PI * p);
        var tx = 2 * distance * p;
    
        self.style.transform = "translate(" 
          + tx + "px," + ty + "px)";
        if(p < 1.0) requestAnimationFrame(step);
      });
    });
    

    2.5 圆周运动

    圆周运动公式:
    $$
    x = R.sin(2πp) , y = R.cos(2πp)
    $$

    block.addEventListener("click", function() {
      var self = this,
          startTime = Date.now(),
          r = 100,
          duration = 2000;
    
      requestAnimationFrame(function step() {
        var p = Math.min(1.0, (Date.now() - startTime) / duration);
        var tx = r * Math.sin(2 * Math.PI * p),
            ty = -r * Math.cos(2 * Math.PI * p);
    
        self.style.transform = "translate(" +
          tx + "px," + ty + "px)";
        requestAnimationFrame(step);
      });
    });
    

    三、动画算子(easing)

    ​ 对于一些比较复杂的变化,算法也比较复杂,就要用到动画算子。动画算子 是一个函数,可以把进度转化成另外一个值。其实也就是一种算法。

    我们总结一下上面的各类动画,发现它们是非常相似的,匀速运动、匀加速运动、匀减速运动、圆周运动唯一的区别仅仅在于位移方程:

    • 匀速运动:
      $$
      s = S *p
      $$

    • 匀加速运动:

    $$
    s = S *p^2
    $$

    • 匀减速运动:

    $$
    s = Sp(2-p)
    $$

    • 圆周运动x轴:

    $$
    x = Rsin(2PI*p)
    $$

    • 圆周运动y轴:

    $$
    y = Rcos(2PI*p)
    $$

    我们把共同的部分 S 或R 去掉,得到一个关于 p 的方程 ,这个方程我们称为动画的算子(easing),它决定了动画的性质。

    • 匀速算子:

    $$
    e = p
    $$

    • 匀加速算子:

    $$
    e = p^2
    $$

    • 匀减速算子:

    $$
    e = p*(2 - p)
    $$

    • 圆周算子x轴:

    $$
    e = sin(2PIp)
    $$

    • 圆周算子y轴:

    $$
    e = cos(2 * PI * p)
    $$

    一些常用的动画算子

    
    var pow = Math.pow,
         BACK_CONST = 1.70158;
    // t指的的是动画进度  前面的p
    Easing = {
            // 匀速运动
            linear: function (t) {
                return t;
            },
            // 加速运动
            easeIn: function (t) {
                return t * t;
            },
            // 减速运动
            easeOut: function (t) {
                return (2 - t) * t;
            },
            //先加速后减速
            easeBoth: function (t) {
                return (t *= 2) < 1 ? .5 * t * t : .5 * (1 - (--t) * (t - 2));
            },
            // 4次方加速
            easeInStrong: function (t) {
                return t * t * t * t;
            },
            // 4次方法的减速
            easeOutStrong: function (t) {
                return 1 - (--t) * t * t * t;
            },
            // 先加速后减速,加速和减速的都比较剧烈
            easeBothStrong: function (t) {
                return (t *= 2) < 1 ? .5 * t * t * t * t : .5 * (2 - (t -= 2) * t * t * t);
            },
            //  
            easeOutQuart: function (t) {
                return -(Math.pow((t - 1), 4) - 1)
            },
            // 指数变化 加减速
            easeInOutExpo: function (t) {
                if (t === 0) return 0;
                if (t === 1) return 1;
                if ((t /= 0.5) < 1) return 0.5 *Math.pow(2, 10 * (t - 1));
                return 0.5 * (-Math.pow(2, - 10 * --t) + 2);
            },
            //指数式减速
            easeOutExpo: function (t) {
                return (t === 1) ? 1 : -Math.pow(2, - 10 * t) + 1;
            },
            // 先回弹,再加速
            swingFrom: function (t) {
                return t * t * ((BACK_CONST + 1) * t - BACK_CONST);
            },
    
            // 多走一段,再慢慢的回弹
            swingTo: function (t) {
                return (t -= 1) * t * ((BACK_CONST + 1) * t + BACK_CONST) + 1;
            },
    
            //弹跳
            bounce: function (t) {
                var s = 7.5625,
                    r;
    
                if (t < (1 / 2.75)) {
                    r = s * t * t;
                } else if (t < (2 / 2.75)) {
                    r = s * (t -= (1.5 / 2.75)) * t + .75;
                } else if (t < (2.5 / 2.75)) {
                    r = s * (t -= (2.25 / 2.75)) * t + .9375;
                } else {
                    r = s * (t -= (2.625 / 2.75)) * t + .984375;
                }
    
                return r;
            }
        };
    

    四、使用面向对象封装动画

    为了实现更加复杂的动画,我们可以将动画进行 简易 的封装,要进行封装,我们先要抽象出动画相关的要素

    动画时长:T = duration

    动画进程:p = t/T

    easing: e = f(p) (动画算子:p的函数 )

    动画方程: x = g(e) y = g(e) (动画的位移相对于动画算子的方程)

    动画生命周期:开始、进程中、结束

    <script type="text/javascript">
        /*
          参数1:动画的执行时间
          参数2:动画执行的时候的回调函数(动画执行的要干的事情)
          参数3:动画算子. 如果没有传入动画算子,则默认使用匀速算子
         */
        function Animator(duration, progress, easing) {
            this.duration = duration;
            this.progress = progress;
            this.easing = easing || function(p) {
                return p
            };
        }
        Animator.prototype = {
            /*开始动画的方法, 
             参数:一个布尔值
             true表示动画不循环执行。  
            */
            start: function(finished) {
                /*动画开始时间*/
                var startTime = Date.now();
                /*动画执行时间*/
                var duration = this.duration,
                    self = this;
                /*定义动画执行函数*/
                requestAnimationFrame(function step() {
                    /*得到动画执行进度*/
                    var p = (Date.now() - startTime) / duration;
                    /*是否执行下一帧动画*/
                    var next = true;
                    /*判断动画进度是否完成*/
                    if(p < 1.0) {
                        self.progress(self.easing(p), p);   //执行动画回调函数,并传入动画算子的结果和动画进度。
                    } else {
                        if(finished){  //判断是否停止动画。如果是true代表停止动画。
                            next = false;
                        }else{
                            startTime = Date.now();
                        } 
                    }
                    // 如果next是true执行下一帧动画
                    if(next) requestAnimationFrame(step);
                });
            }
        };
        block.onclick = function  () {
            var self = this;
            new Animator(2000, function (p) {
                self.style.top = 500 * p +"px";
            },Easing.bounce).start(false);
        }
    

    五、逐帧动画

    有时候,我们不但要支持元素的运动,还需要改变元素的外观,比如飞翔的小鸟需要扇动翅膀,这类动画我们可以用逐帧动画来实现:

    <style type="text/css">
    .sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(http://res.h5jun.com/matrix/8PQEganHkhynPxk-CUyDcJEk.png);}
    
    .bird0 {width:86px; height:60px; background-position: -178px -2px}
    .bird1 {width:86px; height:60px; background-position: -90px -2px}
    .bird2 {width:86px; height:60px; background-position: -2px -2px}
    
     #bird{
       position: absolute;
       left: 100px;
       top: 100px;
       zoom: 0.5;
     }
    </style>
    <div id="bird" class="sprite bird1"></div>
    <script>
    var i = 0;
    setInterval(function(){
      bird.className = "sprite " + "bird" + ((i++) % 3);
    }, 1000/10);
    </script>
    

    相关文章

      网友评论

        本文标题:原生JavaScript中动画与特效的实现原理

        本文链接:https://www.haomeiwen.com/subject/ecyeattx.html