1 page.title=The Transitions Framework 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>This lesson covers</h2> 8 <ol> 9 <li><a href="#Overview">Overview</a></li> 10 <li><a href="#Scenes">Scenes</a></li> 11 <li><a href="#Transitions">Transitions</a></li> 12 <li><a href="#Limitations">Limitations</a></li> 13 </ol> 14 </div> 15 </div> 16 17 <p>Animating your app's user interface provides more than just visual appeal. Animations 18 highlight changes and provide visual cues that help users learn how your app works.</p> 19 20 <p>To help you animate a change between one view hierarchy and another, Android provides the 21 transitions framework. This framework applies one or more animations to all the views in the 22 hierarchies as it changes between them.</p> 23 24 <p>The framework has the following features:</p> 25 26 <dl> 27 <dt><em>Group-level animations</em></dt> 28 <dd>Applies one or more animation effects to all of the views in a view hierarchy.</dd> 29 <dt><em>Transition-based animation</em></dt> 30 <dd>Runs animations based on the changes between starting and ending view property values.</dd> 31 <dt><em>Built-in animations</em></dt> 32 <dd>Includes predefined animations for common effects such as fade out or movement.</dd> 33 34 <!-- Figure 1 - Transitions video --> 35 <div style="float:right;margin-left:30px;margin-top:10px"> 36 <div class="framed-nexus5-port-span-5" style="clear:left;"> 37 <video class="play-on-hover" height="442" autoplay="" poster=""> 38 <source src="{@docRoot}images/transitions/transition_sample_video.mp4" type="video/mp4"> 39 <source src="{@docRoot}images/transitions/transition_sample_video.ogv" type="video/ogg"> 40 <source src="{@docRoot}images/transitions/transition_sample_video.webm" type="video/webm"> 41 </video> 42 </div> 43 <p class="img-caption" style="margin-top:7px;margin-bottom:0px"> 44 <strong>Figure 1.</strong> Visual cues using user interface animation.</p> 45 <div style="margin-top:5px;margin-bottom:20px;font-size:10pt" class="video-instructions"> </div> 46 </div> 47 48 <dt><em>Resource file support</em></dt> 49 <dd>Loads view hierarchies and built-in animations from layout resource files.</dd> 50 <dt><em>Lifecycle callbacks</em></dt> 51 <dd>Defines callbacks that provide finer control over the animation and hierarchy change 52 process.</dd> 53 </dl> 54 55 56 57 <h2 id="Overview">Overview</h2> 58 59 <p>The example in Figure 1 shows how an animation provides visual cues to help the user. As the 60 app changes from its search entry screen to its search results screen, it fades out views that 61 are no longer in use and fades in new views.</p> 62 63 <p>This animation is an example of using the transitions framework. The framework 64 animates changes to all the views in two view hierarchies. A view hierarchy can be as simple 65 as a single view or as complex as a {@link android.view.ViewGroup} containing an elaborate 66 tree of views. The framework animates each view by changing one or more of its property values 67 over time between the initial or <em>starting</em> view hierarchy and the final or <em>ending</em> 68 view hierarchy.</p> 69 70 <p>The transitions framework works in parallel with view hierarchies and animations. The 71 purpose of the framework is to store the state of view hierarchies, change between these 72 hierarchies in order to modify the appearance of the device screen, and animate the change by 73 storing and applying animation definitions.</p> 74 75 <p>The diagram in Figure 2 illustrates the relationship between view hierarchies, framework 76 objects, and animations:</p> 77 78 <!-- Figure 2 - diagram --> 79 <img src="{@docRoot}images/transitions/transitions_diagram.png" 80 width="506" height="234" alt="" style="margin-top:7px" /> 81 <p class="img-caption"><strong>Figure 2.</strong> Relationships in the transitions framework.</p> 82 83 <p>The transitions framework provides abstractions for scenes, transitions, and transition 84 managers. These are described in detail in the following sections. To use the framework, you 85 create scenes for the view hierarchies in your app that you plan to change between. Next, you 86 create a transition for each animation you want to use. To start the animation between two 87 view hierarchies, you use a transition manager specifying the transition to use and the ending 88 scene. This procedure is described in detail in the remaining lessons in this class.</p> 89 90 91 92 <h2 id="Scenes">Scenes</h2> 93 94 <p>A scene stores the state of a view hierarchy, including all its views and their property 95 values. A view hierarchy can be a simple view or a complex tree of views and child layouts. 96 Storing the view hierarchy state in a scene enables you to transition into that state from 97 another scene. The framework provides the {@link android.transition.Scene} class to represent 98 a scene.</p> 99 100 <p>The transitions framework lets you create scenes from layout resource files or from 101 {@link android.view.ViewGroup} objects in your code. Creating a scene in your code is useful 102 if you generated a view hierarchy dynamically or if you are modifying it at runtime.</p> 103 104 <p>In most cases, you do not create a starting scene explicitly. If you have applied a 105 transition, the framework uses the previous ending scene as the starting scene for any 106 subsequent transitions. If you have not applied a transition, the framework collects information 107 about the views from the current state of the screen.</p> 108 109 <p>A scene can also define its own actions that run when you make a scene change. For example, 110 this feature is useful for cleaning up view settings after you transition to a scene.</p> 111 112 <p>In addition to the view hierarchy and its property values, a scene also stores a reference 113 to the parent of the view hierarchy. This root view is called a <strong>scene root</strong>. 114 Changes to the scene and animations that affect the scene occur within the scene root.</p> 115 116 <p>To learn how to create scenes, see 117 <a href="{@docRoot}training/transitions/scenes.html">Creating a Scene</a>.</p> 118 119 120 121 <h2 id="Transitions">Transitions</h2> 122 123 <p>In the transitions framework, animations create a series of frames that depict a change 124 between the view hierarchies in the starting and ending scenes. Information about the animation 125 is stored in a {@link android.transition.Transition} object. To run the animation, you apply the 126 transition using a {@link android.transition.TransitionManager} instance. The framework can 127 transition between two different scenes or transition to a different state for the current 128 scene.</p> 129 130 <p>The framework includes a set of built-in transitions for commonly-used animation effects, 131 such as fading and resizing views. You can also define your own custom transitions to create 132 an animation effect using the APIs in the animations framework. The transitions framework also 133 enables you to combine different animation effects in a transition set that contains a group 134 of individual built-in or custom transitions.</p> 135 136 <p>The transition lifecycle is similar to the activity lifecycle, and it represents the 137 transition states that the framework monitors between the start and the completion of an 138 animation. At important lifecycle states, the framework invokes callback methods that you can 139 implement to make adjustments to your user interface at different phases of the transition.</p> 140 141 <p>To learn more about transitions, see 142 <a href="{@docRoot}training/transitions/transitions.html">Applying a Transition</a> and 143 <a href="{@docRoot}training/transitions/custom-transitions.html">Creating Custom 144 Transitions</a>.</p> 145 146 147 148 <h2 id="Limitations">Limitations</h2> 149 150 <p>This section lists some known limitations of the transitions framework:</p> 151 152 <ul> 153 <li>Animations applied to a {@link android.view.SurfaceView} may not appear correctly. 154 {@link android.view.SurfaceView} instances are updated from a non-UI thread, so the updates 155 may be out of sync with the animations of other views.</li> 156 <li>Some specific transition types may not produce the desired animation effect when applied 157 to a {@link android.view.TextureView}.</li> 158 <li>Classes that extend {@link android.widget.AdapterView}, such as 159 {@link android.widget.ListView}, manage their child views in ways that are incompatible with 160 the transitions framework. If you try to animate a view based on 161 {@link android.widget.AdapterView}, the device display may hang.</li> 162 <li>If you try to resize a {@link android.widget.TextView} with an animation, the text will 163 pop to a new location before the object has completely resized. To avoid this problem, do not 164 animate the resizing of views that contain text.</li> 165 </ul> 166
