1.第三方动画 tween.js
2.实现:缓动公式(效果:控制物体在某个时间段内的运动速度)
缓动函数:
1.linear 匀速
2.Quad 二次方缓动效果
3.Cubic 三次方缓动效果
4.Quart 四次方缓动效果
5.Quint 五次方缓动效果
6.Sine 正弦缓动效果
7.Expo 指数缓动效果
8.Circ 圆形缓动函数
9.Elastic 指数衰减正弦曲线缓动函数
10.Back 超过范围的三次方的缓动函数
11.Bounce 指数衰减的反弹曲线缓动函数
每种缓动函数都由三种效果:
1.easeIn 加速
2.easeOut 减速
3.easeInOut 先加速后减速
注:linear 只有一种效果匀速
每个函数都有四个参数:
1.t====> current time:当前时间.解释为:开始的步数(一般从0开始),预示着一段动画的开始.
2.b====>beginning value 初始值.解释为:开始量(开始的属性值)
3.c====>change in value 变化量.解释为属性值的改变量:结束位置的属性值 - 开始位置的属性值
4.d====>duration 持续时间.解释为:结束的步数(运动的总时间)
注意:当开始步数增加到与结束步数相等时,整个运动结束.
注注意:只有当t增加到与d相等时才会结束运动;如果不等,运动不会停止.
tween.js的使用
1.下载
2.引入
3.使用tween.js语法
Tween.缓动函数名.缓动效果名(t,b,c,d);
如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释
下面就介绍如何使用这个Tween了，首先b、c、d三个参数（即初始值，变化量，持续时间）在缓动开始前，是需要先确定好的。
首先引入一个概念就补间动画
Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。
tween.js在Flash中可以解释为补间动画.
那么问题来了,什么是补间动画呢?
相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一.
补间动画有动作补间动画与形状补间动画两种,但是在js中却不需要了解这么多.
好了,废话不多说,先看看百度百科关于补间动画给出的定义:
补间动画：做flash动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动；
插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的
那么什么是关键帧呢?
举个栗子:
先科普一下,平常所看的电影,动画都是24帧的,24帧为一秒.在人眼可以捕捉的范围内.
可以想象两个点之间有有22个点,形成一条直线或者曲线.而每一个点就代表一帧,
帧——就是动画中最小单位的单幅影像画面,而单幅影像画面就可以看做是一个对象(一切皆对象,除去值类型)了.
而这条线就代表对象的运动轨迹.
重点来了:
t:代表第一个点,也就是第一帧,也就是一个动画开始的地方.
b:代表初始值,也就是开始量,我们看电影或者动画一般都不会看序幕把,那么跳过开头部分,选择第一帧和最后一帧之间你要开始看位置,而此位置就是初始值.
c:代表的就是最后一帧减去初始值就是变化量,
d:代表最后一帧,1s的结束,也是动画的结束
当然了,你可以可以扩大为48帧,96帧...
最后上个栗子你尝尝:
举一个简单的例子，一个div要向右缓动，left初始值是50，那么b就是50，要向右移动100，那c就是100，如果知道的是目标值，
例如要向右移动到150，那就把目标值150减初始值b就是变化量c了。
至于d的设置就比较灵活，只要符合t是从0向d递增（或递减）就可以了。
d跟步长配合使用来设置持续时间，例如d设置为100，如果设置步长是1，
那么从0到100就有100步，即分100次来完成这个过程，步数越多那么持续时间就越长。
至于t的变化相当于时间的变化，一般是均匀变化的，每次变化都增加一个步长，当t从0递增（或递减）到d时，缓动就结束了。
要注意的是t是从0开始的，设置步长时必须确定t确实能到达d，如果上面的步长是3，那么t就永远都到不了d了。
更好的处理是当t等于或超过d之后，就停止定时器并设置当前值为目标值。
简单小案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ position: relative; } div{ width: 200px; height:200px; background: red; position: absolute; top:0; left:50px; } button{ position: absolute; top:250px; } </style> </head> <body> <div></div> <button>点击向右缓动</button> <script> // 先引入Tween.js就引入一个动画,用哪个引入哪个呵 var Tween = { Linear: function(t,b,c,d){ return c*t/d + b;} }; var btn = document.getElementsByTagName("button")[0]; var div = document.getElementsByTagName("div")[0]; var t = 0; var b = 50; var c = 100; var d = 100; var speed = 1; btn.onclick = function(){ function sport(){ //每次运行函数使t的值增加speed t += speed; //当t追赶到d之后 if(t == d){ clearInterval(timer); } div.style.left = Tween.Linear(t,b,c,d) + "px"; } var timer = setInterval(sport,10); } </script> </body> </html>