一、明白tween.js

假如看到上面的已明白了,能够跳过下面的部份.下面为对Tween.js的诠释 下面就引见怎样应用这个Tween了，起首b、c、d三个参数（即初始值，变化量，持续时候）在缓动最先前，是须要先确定好的。 起首引入一个观点就补间动画 Flash做动画时会用到Tween类，应用它能够做许多动画结果，比方缓动、弹簧等等。 tween.js在Flash中能够诠释为补间动画. 那末题目来了,什么是补间动画呢?

置信学过Flash的都晓得补间动画是flash重要的非常重要的表现手腕之一.补间动画有行动补间动画与外形补间动画两种,但是在js中却不须要相识这么多. 好了,空话不多说,先看看百度百科关于补间动画给出的定义: 补间动画：做flash动画时，在两个关键帧中心须要做“补间动画”，才完成图画的活动； 插进去补间动画后两个关键帧之间的插补帧是由计算机自动运算而获得的

那末什么是关键帧呢? 举个栗子: 先科普一下,寻常所看的影戏,动画都是24帧的,24帧为一秒.在人眼能够捕获的局限内.能够设想两个点之间有有22个点,构成一条直线或许曲线.而每个点就代表一帧,帧——就是动画中最小单元的单幅影象画面,而单幅影象画面就能够看作是一个对象(统统皆对象,撤除值范例)了.而这条线就代表对象的活动轨迹.

二、四个参数

• t: current time–>代表第一个点，也就是第一帧，也就是一个动画最先的处所。
• b: beginning value–>代表初始值，也就是最先量，我们看影戏或许动画平常都不会看序幕把，那末跳过开首部份，挑选第一帧和末了一帧之间你要最先看位置，而此位置就是初始值。
• c: change in value–>代表的就是末了一帧减去初始值就是变化量，
• d: duration–>代表末了一帧,1s的完毕,也是动画的完毕。

tween.js的应用 1.下载 2.引入 3.应用tween.js语法

Tween.缓动函数名.缓动结果名(t,b,c,d);

注重:当最先步数增加到与完毕步数相称时,全部活动完毕. 注注重:只有当t增加到与d相称时才会完毕活动;假如不等,活动不会住手.

三、tween文件代码

/*
 * Tween.js
 * t: current time（当前时候）；
 * b: beginning value（初始值）；
 * c: change in value（变化量）；
 * d: duration（持续时候）。
*/
var Tween = {
    Linear: function(t, b, c, d) { //匀速
        return c * t / d + 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;
        }
    },
    Elastic: { //指数衰减正弦曲线缓动函数
        easeIn: function(t, b, c, d, a, p) { //加快
            var s;
            if (t==0) return b;
            if ((t /= d) == 1) return b + c;
            if (typeof p == "undefined") p = d * .3;
            if (!a || a < Math.abs(c)) {
                s = p / 4;
                a = c;
            } else {
                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) { //减速
            var s;
            if (t==0) return b;
            if ((t /= d) == 1) return b + c;
            if (typeof p == "undefined") p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c; 
                s = p / 4;
            } else {
                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) { //先加快后减速
            var s;
            if (t==0) return b;
            if ((t /= d / 2) == 2) return b+c;
            if (typeof p == "undefined") p = d * (.3 * 1.5);
            if (!a || a < Math.abs(c)) {
                a = c; 
                s = p / 4;
            } else {
                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;
        }
    },
    Back: { //凌驾局限的三次方的缓动函数
        easeIn: function(t, b, c, d, s) {
            if (typeof s == "undefined") s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOut: function(t, b, c, d, s) {
            if (typeof 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 (typeof 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;
        }
    },
    Bounce: { //指数衰减的反弹曲线缓动函数
        easeIn: function(t, b, c, d) {
            return c - Tween.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 Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
            } else {
                return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
            }
        }
    }
}
Math.tween = Tween;

四、举个栗子

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="Tween/tween.js"></script>
        <style>
            *{margin: 0;padding: 0;}
            .out{width: 800px;height: 500px;background: #e5e5e5;position: relative;padding: 20px;text-align: center;}
            .inner{width: 50px;height: 50px;border-radius: 50%;background: #FF0000; position: absolute;left: 50px;top: 50px;}
        </style>
    </head>

    <body>
        <div id="app" class="out">
            <div class="inner" id="ball"></div>
            <button id="start" @click="start()">start</button>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                t: 0,
                b: 50,
                c: 500,
                d: 1500,
            },
            methods:{
                start(){
                    var t = this.t;
                    const b = this.b;
                    const c = this.c;
                    const d = this.d;
                    const setInt = setInterval(()=>{
                        t++;
                        console.log(t)
                        if(t==300){clearInterval(setInt)}
                        console.log(t);
                        const ballLeft = Tween.Linear(t,b,c,d)+"px";
                        ball.style.left = ballLeft;
                    },20)
                }
            }
        })
    </script>

</html>

五、个人体味

tween的上风在于tween完成结果是根据算法，不是某种言语的语法，因而能够应用的处所很普遍，一次进修毕生受益。