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

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

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

	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>

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:dev4.5.1frameworksprojectssparksrcsparkeffectssupportClassesAnimateInstance.as:1099]
at spark.effects.supportClasses::AnimateInstance/setValue()[E:dev4.5.1frameworksprojectssparksrcsparkeffectssupportClassesAnimateInstance.as:1114]
at spark.effects.supportClasses::AnimateInstance/applyValues()[E:dev4.5.1frameworksprojectssparksrcsparkeffectssupportClassesAnimateInstance.as:579]
at spark.effects.supportClasses::AnimateInstance/animationUpdate()[E:dev4.5.1frameworksprojectssparksrcsparkeffectssupportClassesAnimateInstance.as:760]
at spark.effects.animation::Animation/sendUpdateEvent()[E:dev4.5.1frameworksprojectssparksrcsparkeffectsanimationAnimation.as:841]
at spark.effects.animation::Animation/start()[E:dev4.5.1frameworksprojectssparksrcsparkeffectsanimationAnimation.as:1397]
at spark.effects.animation::Animation/play()[E:dev4.5.1frameworksprojectssparksrcsparkeffectsanimationAnimation.as:1088]
at spark.effects.supportClasses::AnimateInstance/play()[E:dev4.5.1frameworksprojectssparksrcsparkeffectssupportClassesAnimateInstance.as:558]
at spark.effects.supportClasses::AnimateInstance/startEffect()[E:dev4.5.1frameworksprojectssparksrcsparkeffectssupportClassesAnimateInstance.as:433]
at mx.effects.effectClasses::ParallelInstance/play()[E:dev4.5.1frameworksprojectsframeworksrcmxeffectseffectClassesParallelInstance.as:345]
at mx.effects::EffectInstance/startEffect()[E:dev4.5.1frameworksprojectsframeworksrcmxeffectsEffectInstance.as:680]
at mx.effects::Effect/play()[E:dev4.5.1frameworksprojectsframeworksrcmxeffectsEffect.as:1246]
at testAnimate/init()[E:WorkspacePageChangeProjectsrctestAnimate.mxml:121]
at testAnimate/application1_initializeHandler()[E:WorkspacePageChangeProjectsrctestAnimate.mxml:58]
at testAnimate/___testAnimate_Application1_initialize()[E:WorkspacePageChangeProjectsrctestAnimate.mxml:8]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:dev4.5.1frameworksprojectsframeworksrcmxcoreUIComponent.as:13128]
at mx.core::UIComponent/set processedDescriptors()[E:dev4.5.1frameworksprojectsframeworksrcmxcoreUIComponent.as:1871]
at mx.core::UIComponent/initializationComplete()[E:dev4.5.1frameworksprojectsframeworksrcmxcoreUIComponent.as:7660]
at mx.core::UIComponent/initialize()[E:dev4.5.1frameworksprojectsframeworksrcmxcoreUIComponent.as:7639]
at spark.components::Application/initialize()[E:dev4.5.1frameworksprojectssparksrcsparkcomponentsApplication.as:1334]
at testAnimate/initialize()
at mx.managers.systemClasses::ChildManager/childAdded()[E:dev4.5.1frameworksprojectsframeworksrcmxmanagerssystemClassesChildManager.as:189]
at mx.managers.systemClasses::ChildManager/initializeTopLevelWindow()[E:dev4.5.1frameworksprojectsframeworksrcmxmanagerssystemClassesChildManager.as:359]
at mx.managers::SystemManager/initializeTopLevelWindow()[E:dev4.5.1frameworksprojectsframeworksrcmxmanagersSystemManager.as:3063]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::kickOff()[E:dev4.5.1frameworksprojectsframeworksrcmxmanagersSystemManager.as:2849]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::preloader_completeHandler()[E:dev4.5.1frameworksprojectsframeworksrcmxmanagersSystemManager.as:2729]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::Preloader/timerHandler()[E:dev4.5.1frameworksprojectsframeworksrcmxpreloadersPreloader.as:542]
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()

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