flex4 的时间轴动画

http://zhangyulin20083.blog.163.com/blog/static/7762751020101012102747872/我想在未来的某个地方会用到的吧，所以在网上搜到了那么就保存在这里吧，有时间再深入的研究一下：

来源：http://www.puxiao.com/?p=366

Flex4里新增<s:Animate>,<s:MotionPath>,<s:KeyFrame>标签，可用来制作类似时间轴动画(依托于同一个显示对象不同的时间点上时，不同的属性值)。

具体的用法也很简单，看看下面的代码片断就明白了：

<fx:Declarations>
<s:Animate id=”myAnimate” target=”{myImage}”>
<s:MotionPath property=”width”>
<s:KeyFrame time=”0″ value=”10″/>
<s:KeyFrame time=”500″ value=”100″/>
</s:MotionPath>
<s:MotionPath property=”height”>
<s:KeyFrame time=”0″ value=”10″/>
<s:KeyFrame time=”500″ value=”100″/>
</s:MotionPath>
</s:Animate>
</fx:Declarations>
<mx:Image id=”myImage” source=”@Embed(’assets/sex.png’)”/>

另外，Animate有一个属性disableLayout:Boolean(默认false)，他用来指示当动画播放中时，是否更新当前的布局。
false：动画进行时，更新布局
true：动画播放结束时，才更新布局

注意:在Flex4里，所有特效必须在<fx:Declarations>标签内，不像Flex3里面，可以直接写到<mx:Application>标签内

这里做了一个例子，在mxml里，使用<s:Rect>标签，画出来一个矩形显示对象，并设置fill属性为一个纯颜色<mx:SolidColor color=”0×000000″/>。
然后针对这个矩形，做了些类似时间轴补间动画：

察看源代码?|?下载源文件