Tween算法及缓动效果,javascript中的缓动效果实现程序

常见的动画有四种类型,介绍一下:
  linear:线性动画,即匀速
  easeIn:速度从小到大,即淡入
  easeOut :速度从大到小,即淡出
  easeInOut:开始时速度从小到大,结束时速度从大到小,即淡入淡出

Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动、弹簧等等。
我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果。

其实说到缓动,就不得不提Robert Penner,他发明了N多缓动公式,举个例子

实例效果

我还是解释一下吧:

Tween类型:
Linear Quadratic Cubic Quartic Quintic Sinusoidal
Exponential Circular Elastic Back Bounce

  设当前变化量为X,则
  t / d = X / c,所以X = c * t / d,然后X + b就可以获得当前属性值

ease类型:
easeIn easeOut easeInOut

再看一个稍复杂的:  
这个有淡入效果,也就是说动画开始时,值的变化量从小到大。
可以发现两者唯一的区别就是 t / d 和 (t /= d) * t,刚才说了t /
d是一个>=0 && <=1的比值,暂取名为a,而(t /= d) *
t就相当于Math.pow(a, 2)。

效果说明

**为什么要平方呢?

首先大家到这里下载flash的as脚本(建议看看这里的demo),1.0和2.0都可以(里面的算法都一样)。
例如打开2.0的可以看到几个as文件,每个文件对应一个Tween效果,分别有(参考里面的说明):
Linear:无缓动效果;
Quadratic:二次方的缓动(t^2);
Cubic:三次方的缓动(t^3);
Quartic:四次方的缓动(t^4);
Quintic:五次方的缓动(t^5);
Sinusoidal:正弦曲线的缓动(sin(t));
Exponential:指数曲线的缓动(2^t);
Circular:圆形曲线的缓动(sqrt(1-t^2));
Elastic:指数衰减的正弦曲线缓动;
Back:超过范围的三次方缓动((s+1)*t^3 – s*t^2);
Bounce:指数衰减的反弹缓动。
ps:以上都是自己的烂翻译,希望各位修正。

**1. 首先a >= Math.pow(a, 2)是肯定的

每个效果都分三个缓动方式(方法),分别是:
easeIn:从0开始加速的缓动;
easeOut:减速到0的缓动;
easeInOut:前半段从0开始加速,后半段减速到0的缓动。
其中Linear是无缓动效果,没有以上效果。

  1. 每次调用函数时,t / d
    这个比值也是匀速变大的,比如第1次调用时是0.1(平方0.01),第2次调用时是0.2(平方0.04)等,那第10次调用时,肯定是1没错吧,这时候
    c * 1 + b,动画就到此结束了
    3.
    第2点证明了比值越小,值的变化量就越小,比值越大,值的变化量就越大,如果不用平方而是三次方,那淡入效果就更明显了。

然后看看里面的算法,以Quad.as的easeOut为例:

样式、结构及公共函数如下:

图片 1图片 2Code
static function easeOut (t:Number, b:Number, c:Number, d:Number):Number {
    return -c *(t/=d)*(t-2) + b;
}

复制代码 代码如下:

 
这是as代码,四个参数分别是:
t: current time(当前时间);
b: beginning value(初始值);
c: change in value(变化量);
d: duration(持续时间)。
ps:Elastic和Back有其他可选参数,里面都有说明。

 <style>
        #container {width:500px;height:100px;border:1px #d1d1d1
solid;position:relative;}
        #drag
{width:100px;height:100px;background:#369;position:absolute;left:0;top:0;}
    </style>
<div id=”container”>
<div id=”drag”></div>
</div>

那如何在js中利用这些算法呢?可以看到,虽然是as代码,但里面的程序是可以直接放在js里使用的。
我们可以定义一个类,把它这部分放在里面:

    <script type=”text/javascript”>
        function $(id) {
            return typeof id == ‘string’ ? document.getElementById(id) :
id;
        }
        function getStyle(el,styleProp){
            return el.currentStyle ? el.currentStyle[styleProp] :
document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
        }
    </script>

图片 3图片 4Code
var Tween = {
    Quad: {
        easeOut: function(t,b,c,d){
            return -c *(t/=d)*(t-2) + b;
        }
    }
}

首先,从最简单的入手:设定开始位置和结束位置及步长,每次增加固定的值,直至终止条件

这样,就可以用Tween.Quad.easeOut取得这个算法了,其他算法也一样处理就行了。

复制代码 代码如下:

接下来就可以利用这个js的Tween来做一些缓动效果了。
先通过上面的坐标实例说一下算法原理:
x轴是时间,y轴是当前值,b是y轴的初始值,x轴的初始值是0,t是当前时间。当t(x轴)逐渐增加到达d时,当前值(y轴)会到达目标值(b+c)。
想详细理解的话可以找资料看看吧(貌似跟数学关系比较大)。

var timer = null;
        var begin = 0, end = 400, step = 5;
        var drag = $(“drag”);
        function run() {
            if((iLeft = parseInt(getStyle(drag,”left”))) < end){
                drag.style.left = iLeft + step + “px”;
            }else{
                clearInterval(timer);
            }
        }
        var timer = setInterval(run, 20);

下面就介绍如何使用这个Tween了,首先b、c、d三个参数(即初始值,变化量,持续时间)在缓动开始前,是需要先确定好的。
举一个简单的例子,一个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之后,就停止定时器并设置当前值为目标值。