Creating a custom easing function
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> private function myEasingFunction(t:Number, b:Number, c:Number, d:Number):Number { return 0.2; }; </mx:Script> <mx:Move id="moveLeftShow" xFrom="600" xTo="0" yTo="0" duration="3000" easingFunction="myEasingFunction" /> <mx:Move id="moveRightHide" xFrom="0" xTo="600" duration="3000" easingFunction="myEasingFunction" /> <mx:LinkBar dataProvider="myVS" /> <mx:ViewStack id="myVS" borderStyle="solid"> <mx:Canvas id="Canvas0" label="Canvas0" creationCompleteEffect="{moveLeftShow}" showEffect="{moveLeftShow}" hideEffect="{moveRightHide}"> <mx:Box height="300" width="600" backgroundColor="#00FF00"> <mx:Label text="Screen 0" color="#FFFFFF" /> </mx:Box> </mx:Canvas> <mx:Canvas id="Canvas1" label="Canvas1" showEffect="{moveLeftShow}" hideEffect="{moveRightHide}"> <mx:Box height="300" width="600" backgroundColor="#0033CC"> <mx:Label text="Screen 1" color="#FFFFFF" /> </mx:Box> </mx:Canvas> <mx:Canvas id="Canvas2" label="Canvas2" showEffect="{moveLeftShow}" hideEffect="{moveRightHide}"> <mx:Box height="300" width="600" backgroundColor="#0000CC"> <mx:Label text="Screen 2" color="#00FFFF" /> </mx:Box> </mx:Canvas> </mx:ViewStack> </mx:Application>
1. | Using a custom easing function | ||
2. | Resize with easing function | ||
3. | Easing Demo | ||
4. | Bounce and Elastic easing classes |