Flex4之自定义动画效果，使用自定义Parallel类来实现

首先附上要做动画效果的组件：

<s:BitmapImage id="img"
source="@Embed('assets/headbrand.jpg')"
horizontalCenter="0" verticalCenter="0" />

然后需要自定义Parallel类，如下所示：

public function init():void{

parallel = new Parallel(img);
parallel.duration = 4000;

var s:SimpleMotionPath = new SimpleMotionPath();
s.valueFrom = 10;
s.valueTo = 200;
s.property = "width";
//注意要有属性

var s2:SimpleMotionPath = new SimpleMotionPath();
s2.valueFrom = 20;
s2.valueTo = 200;
s2.property = "height";

var motionPaths:Vector.<MotionPath>=new Vector.<MotionPath>;
motionPaths.push( s );
motionPaths.push( s2 );

var a:Animate = new Animate();
a.motionPaths = motionPaths;

var m:Move = new Move();
m.xTo =800;
m.yTo = 200;

parallel.addChild( a );
parallel.addChild( m );
//parallel.play();
｝

然后在两个按钮中实现以下功能：

//显示
public function showAnimateFunc():void{
parallel.play();
}

//反向隐藏
public function unShowAnimateFunc():void{
parallel.play(null, true);
}

当然还要申明这两个按钮，如下所示：

<s:controlBarContent>
<s:Button id="btn1"
label="play forward"
click="showAnimateFunc();" />
<s:Button id="btn2"
label="play reversed from end"
click="unShowAnimateFunc();" />
</s:controlBarContent>

注意： 在使用parallel过程中，一定要配合起来使用

var s:SimpleMotionPath = new SimpleMotionPath();

s.valueFrom = 10;

s.valueTo = 200;

s.property = "width";

其中s.property表示要设置的属性值，不能少。而且该属性为目标组件必湏具有的属性，否则会报错。

笔者在使用过程中被下面的问题困扰了。

Error: Property widthfdsa is not a property or a style on object [object BitmapImage]: ReferenceError: Error #1069: 在 spark.primitives.BitmapImage 上找不到属性 getStyle，且没有默认值。.

at spark.effects.supportClasses::AnimateInstance/setupStyleMapEntry()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\effects\supportClasses\AnimateInstance.as:1099]

at spark.effects.supportClasses::AnimateInstance/setValue()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\effects\supportClasses\AnimateInstance.as:1114]

at spark.effects.supportClasses::AnimateInstance/applyValues()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\effects\supportClasses\AnimateInstance.as:579]

at spark.effects.supportClasses::AnimateInstance/animationUpdate()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\effects\supportClasses\AnimateInstance.as:760]

at spark.effects.animation::Animation/sendUpdateEvent()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\effects\animation\Animation.as:841]

at spark.effects.animation::Animation/start()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\effects\animation\Animation.as:1397]

at spark.effects.animation::Animation/play()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\effects\animation\Animation.as:1088]

at spark.effects.supportClasses::AnimateInstance/play()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\effects\supportClasses\AnimateInstance.as:558]

at spark.effects.supportClasses::AnimateInstance/startEffect()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\effects\supportClasses\AnimateInstance.as:433]

at mx.effects.effectClasses::ParallelInstance/play()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\effects\effectClasses\ParallelInstance.as:345]

at mx.effects::EffectInstance/startEffect()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\effects\EffectInstance.as:680]

at mx.effects::Effect/play()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\effects\Effect.as:1246]

at testAnimate/init()[E:\Workspace\PageChangeProject\src\testAnimate.mxml:121]

at testAnimate/application1_initializeHandler()[E:\Workspace\PageChangeProject\src\testAnimate.mxml:58]

at testAnimate/___testAnimate_Application1_initialize()[E:\Workspace\PageChangeProject\src\testAnimate.mxml:8]

at flash.events::EventDispatcher/dispatchEventFunction()

at flash.events::EventDispatcher/dispatchEvent()

at mx.core::UIComponent/dispatchEvent()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:13128]

at mx.core::UIComponent/set processedDescriptors()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:1871]

at mx.core::UIComponent/initializationComplete()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:7660]

at mx.core::UIComponent/initialize()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:7639]

at spark.components::Application/initialize()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\Application.as:1334]

at testAnimate/initialize()

at mx.managers.systemClasses::ChildManager/childAdded()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\systemClasses\ChildManager.as:189]

at mx.managers.systemClasses::ChildManager/initializeTopLevelWindow()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\systemClasses\ChildManager.as:359]

at mx.managers::SystemManager/initializeTopLevelWindow()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\SystemManager.as:3063]

at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::kickOff()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\SystemManager.as:2849]

at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::preloader_completeHandler()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\SystemManager.as:2729]

at flash.events::EventDispatcher/dispatchEventFunction()

at flash.events::EventDispatcher/dispatchEvent()

at mx.preloaders::Preloader/timerHandler()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\preloaders\Preloader.as:542]

at flash.utils::Timer/_timerDispatch()

at flash.utils::Timer/tick()

不过最后还是解决了上面的问题了。