Tween缓冲心得

Tween缓冲
Tween缓冲大家应该都不陌生，说白了就是从一起始位置逐渐移动到目标位置的过程，这个过程可以是加速移动，也可以是减速移动，这些不同的缓动方式就是Tween的各种ease。
Tween算法
概念知道了，了解一下Tween的算法对我们更好的使用Tween或者编写自己的Tween都是很有帮助的。
在缓动过程中，随着时间的推移，对象从起始位置开始逐渐向目标位置移动，我们假设移动的距离为disX，并将其作为y轴，时间t作为x轴，这样可以轻松的得到一条曲线，如下图：

下载 (16.96 KB)

前天 19:56

在上图中我取了三个时间点ta、tb和tc，他们对于的移动的距离分别是da、db和dc，其中ta到tb与tb到tc之间的时间相同，但是很明显的可以 看到db-da比dc-db小，也就是说相同的时间内，时间越靠后，对象移动的越快，实际上着就是Tween中的Cubic缓动模式，你可以在本文开始的 那个SWF中看到它的效果。
如果曲线是下面这种情况，你觉得缓动应该是什么样子的呢？

下载 (16.35 KB)

前天 19:56

在开始部分的SWF的舞台中点击，试着找到这条曲线，看到了吗？上面的方块像是一个篮球掉在地上一样，反弹了几下然后停止在目标位置，这是Tween种的 Bounce缓冲效果。Tween中还有很多很好玩的缓冲模式，你可以在TweenLite开源类库中找到这些缓冲模式。

下载 (10.25 KB)

前天 19:56

效果是看到了,但是缓动是怎么计算的呢?别着急，听我们慢慢给你细说。
首先我先声明几个变量：

• 
  
• time：缓动经历过的时间
• beforeMove：起始位置
• changeDistance：起始位置与目标位置的距离,也就是距离上的一个变化量
• duration：我们要求对象从起始位置移动到目标位置所需的时间，也就是缓动的总时长

我们假设对象是匀速像目标位置移动，那么根据这四个变量可以轻松的计算出对象在经历time时间后应处的位置pos，公式如下：

1.         pos = changeDistance * ( time/duration ) + beforeMove

复制代码

能看明白上面的公式吗？在经历的time时间后，用changeDistance乘以这个时间time占缓动总时长duration的比例，可以得到移动的距离，再加上初始位置便是对象实际应该处的位置。
请你试着代开TweenLite开源类中的Linear类，你会看到下面的代码：

1. package gs.easing {
   
2.         public class Linear {
   
3.                 public static function easeNone (t:Number, b:Number, c:Number, d:Number):Number {
   
4.                         return c*t/d + b;
   
5.                 }
   
6.                 public static function easeIn (t:Number, b:Number, c:Number, d:Number):Number {
   
7.                         return c*t/d + b;
   
8.                 }
   
9.                 public static function easeOut (t:Number, b:Number, c:Number, d:Number):Number {
   
10.                         return c*t/d + b;
    
11.                 }
    
12.                 public static function easeInOut (t:Number, b:Number, c:Number, d:Number):Number {
    
13.                         return c*t/d + b;
    
14.                 }
    
15.         }
    
16. }

是 不是很眼熟？是的，就是刚刚我讲过的那个公式，这就是TweenLite中Linear缓动模式的算法，你可以试着打开其他缓动模式类看一下它们的源码， 虽然easeIn、easeOut和easeInOut的算法不同，但是它们都包含了这四个参数：t（time）、b（beforeMove）、 c（changeDistance）及d（duration）。
但是在TweenLite计算缓动时，并不是直接将起始位置和起始与目标位置的距离作为参数传递给easeIn函数，因为TweenLite不只是缓动坐 标，还包括对象的宽高，透明度等等，所以实际上TweenLite是将这两个数值分别用0和1代替，得到经历时间与缓动时间长的比例factor，然后再 用factor应用到对象属性的缓动上。

1.         factor        = Linear.easeIn ( t,0,1,d);
   
2.         object.para= changeValue * factor + beforeValue;

理解了缓动的计算原理，你是不是可以运用大学里学的曲线方程写出自己的缓动模式呢？！