Flex 4.5 – Using Mobile View Transitions

收录的一篇文章：
原文地址：http://devgirl.org/2011/05/12/flex-4-5-using-mobile-view-transitions/

While navigating through a Flex mobile application from view to view (screen to screen), there is a default transition (animation or effect) that occurs by default and can be customized. It’s called a view transition in Flex mobile lingo, and there are 4 different classes available in the spark.transitions package for you to use out of the box in Flex 4.5:

    * SlideViewTransition
    * CrossFadeViewTransition
    * FlipViewTransition
    * ZoomViewTransition

You can use any of these transition classes with their default properties or set the direction, duration and mode (for some) to cause a different effect such as shown in the following code snippet:

var flipTrans:FlipViewTransition = new FlipViewTransition();
flipTrans.direction = ViewTransitionDirection.UP;
flipTrans.mode = FlipViewTransitionMode.CUBE; //or CARD mode
navigator.pushView(SampleZoom,null,null,flipTrans);
 
var zoomTrans:ZoomViewTransition = new ZoomViewTransition();
zoomTrans.direction = ViewTransitionDirection.RIGHT;
zoomTrans.mode = ZoomViewTransitionMode.IN; //or OUT mode
navigator.popToFirstView(zoomTrans);
 
var slideTrans:SlideViewTransition = new SlideViewTransition();
slideTrans.direction = ViewTransitionDirection.DOWN;
slideTrans.mode = SlideViewTransitionMode.UNCOVER;  //or COVER and PUSH modes
navigator.pushView(SampleZoom,null,null,slideTrans);
 
var fadeTrans:CrossFadeViewTransition = new CrossFadeViewTransition();
fadeTrans.direction = ViewTransitionDirection.LEFT;
// no modes are available for CrossFadeViewTransition
navigator.pushView(SampleZoom,null,null,fadeTrans);

var flipTrans:FlipViewTransition = new FlipViewTransition();
flipTrans.direction = ViewTransitionDirection.UP;
flipTrans.mode = FlipViewTransitionMode.CUBE; //or CARD mode
navigator.pushView(SampleZoom,null,null,flipTrans);

var zoomTrans:ZoomViewTransition = new ZoomViewTransition();
zoomTrans.direction = ViewTransitionDirection.RIGHT;
zoomTrans.mode = ZoomViewTransitionMode.IN; //or OUT mode
navigator.popToFirstView(zoomTrans);

var slideTrans:SlideViewTransition = new SlideViewTransition();
slideTrans.direction = ViewTransitionDirection.DOWN;
slideTrans.mode = SlideViewTransitionMode.UNCOVER;  //or COVER and PUSH modes
navigator.pushView(SampleZoom,null,null,slideTrans);

var fadeTrans:CrossFadeViewTransition = new CrossFadeViewTransition();
fadeTrans.direction = ViewTransitionDirection.LEFT;
// no modes are available for CrossFadeViewTransition
navigator.pushView(SampleZoom,null,null,fadeTrans);

By default the SlideViewTransition (push mode with direction of left) is used for the pushing/popping of all views. It causes the view to slide into place when you are navigating between views. You can change the default transition used for all navigation by setting navigator.defaultPushTransition (when a new view is pushed onto the stack) and navigator.defaultPopTransition (when the view is popped off the view stack so the view beneath it is shown) to an instance of another transition class such as in the code snippet below:

navigator.defaultPushTransition = new FlipViewTransition();
navigator.defaultPopTransition = new FadeViewTransition();

You can set these properties on any navigator within the main ViewNavigatorApplication or TabbedViewNavigatorApplication or View class itself. However if you want it to apply for the entire application you would set it in the root application code.

I recently built a sample using each of these transitions to show how they work, including how to use the modes that might be available (for instance on the FlipViewTransition you can specify card or cube mode), and how applying an easing function such as Bounce or Elastic might affect how it plays (fun stuff )! Here is a screenshot of the sample application:


And below is a short video clip I recorded of it running on my iPod Touch. It’s nothing fancy but you can see the different effects played when the 4 different view transition types are used including what the easing effect might do:

All of the ViewTransition classes extend ViewTransitionBase. The ViewTransitionBase class (and all that extend it) will dispatch a FlexEvent.TRANSITION_START and FlexEvent.TRANSITION_END event when the transition starts and ends respectively. You can create your own custom transitions extending ViewTransitionBase. If you plan to do so though, there’s a lot of information you should first review in the Flex 4.5 ViewTransition specification located here. Note that this is the original specification and some names of properties, events etc have changed.
The source, Flex project (fxp), .ipa and .apk (for iOS and Android) for the recorded sample above can be downloaded here!