Tweener—— Bezier缓动参数
<img class="alignnone size-full wp-image-1438" alt="tweenBezier" src="http://www.everyinch.net/wp-content/uploads/2013/07/tweenBezier.jpg" width="562" height="467" />
目前使用Tweener补间引擎制作的动画基本都是单一方向的，无法沿着某一段曲线缓动。而这种沿着特定路径进行运动的动画效果是可以通过时间轴补间来完成的，好在Tweener补间引擎为我们提供了Bezier曲线的缓动参数。Bezier缓动参数必须至少指定三个点，其中缓动目标目前所在的位置就是Bezier曲线的开始点，而要缓动的目标位置就是Bezier曲线的结束点，只要使用_bezier参数指定一个或多个控制点即可。可以如图6-23所示，使用单一控制点形成平滑的曲线缓动路径。也可以如图6-24所示，使用多个控制点形成比较复杂的缓动路径。
<img class="alignnone size-full wp-image-1443" alt="image057" src="http://www.everyinch.net/wp-content/uploads/2013/07/image057.jpg" width="300" height="132" />
单一控制点的Bezier曲线
<img class="alignnone size-full wp-image-1444" alt="image059" src="http://www.everyinch.net/wp-content/uploads/2013/07/image059.jpg" width="300" height="160" />
多个控制点的Bezier曲线
使用Bezier参数的方法也是比较简单。首先，导入：
[code lang="as3"]import caurina.transitions.properties.CurveModifiers;[/code]
然后执行init函数以初始化CurveModifiers：
[code lang="as3"]CurveModifiers.init();[/code]
最终使用_bezier参数来定义Bezier曲线的控制点：
[code lang="as3"]Tweener.addTween(Object,{
x : targetX,
y : targetY,
_bezier : [{x : curve1X, y : curve1Y}, { x : curve2X, y : curve2Y }，……],
time : 1
};[/code]
下面结合_bezier参数制作一个示例，模拟树叶飘落的效果。源代码如下：
[code lang="as3"]package{
import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;
import flash.display.Bitmap;
import flash.display.Sprite;
[SWF(width="640", height="480", backgroundColor="0xffffff")]
public class TweenerBezier extends Sprite{
[Embed(source="assets/leaf.png")]
private var leaf:Class;
public function TweenerBezier(){
CurveModifiers.init();
for (var i:int=0; i < 30; i++){
var bmp:Bitmap=new leaf();
var sprite:Sprite=new Sprite();
sprite.addChild(bmp);
addChild(sprite);
var targetX:Number=Math.random() * 640;
var targetY:Number=Math.random() * 480;
var curveX:Number=0;
var curveY:Number=targetY;
sprite.x=Math.random() * 30;
sprite.scaleX=Math.random() + 0.3;
sprite.scaleY=sprite.scaleX;
sprite.rotation=Math.random() * 60;
Tweener.addTween(sprite,{
x: targetX,
y: targetY,
alpha: 0,
rotation: Math.random() * 90,
_bezier: {x: curveX, y: curveY},
time: Math.random() * 2 + 1,
delay: Math.random(),
transition: "easeInOutQuad"});
}
}
}
}[/code]
代码导入必要的两个类：
[code lang="as3"] import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;[/code]
并在构造函数中执行：
[code lang="as3"] CurveModifiers.init();[/code]
使用for循环构造30个嵌入的位图，并都将它们加入到Sprite容器当中。将它们的初始位置定义在舞台的左上角并略有随机的改变，缓动的目标点定义在舞台的右下角，Bezier的控制点定义在舞台的左下角，从而可以生成平滑的缓动路径。为了创造比较好的效果，也定义随机的缩放和旋转。最终调用Tweener补间引擎，指定已经设定好的目标点和控制点，从而完成树叶飘落的补间动画。
至此，我们从实现方法的角度学习了Flex自带的缓动方程，并详细学习了目前广为使用的Tweener补间引擎。在以后的章节中还会应用Tweener补间引擎制作动态的补间动画。
查看完整版本： Tweener—— Bezier缓动参数
Tags: