1676faeba90f4869a51f0284faa22223f83554fafRobert Lypage.title=View Animation 24b3e912102d92c3555aae362da67178dcf5bcc55Robert Lyparent.title=Animation 34b3e912102d92c3555aae362da67178dcf5bcc55Robert Lyparent.link=animation.html 4676faeba90f4869a51f0284faa22223f83554fafRobert Ly@jd:body 5676faeba90f4869a51f0284faa22223f83554fafRobert Ly 6676faeba90f4869a51f0284faa22223f83554fafRobert Ly 7676faeba90f4869a51f0284faa22223f83554fafRobert Ly 84b3e912102d92c3555aae362da67178dcf5bcc55Robert Ly <p>You can use the view animation system to perform tweened animation on Views. Tween animation 94b3e912102d92c3555aae362da67178dcf5bcc55Robert Ly calculates the animation with information such as the start point, end point, size, rotation, and 104b3e912102d92c3555aae362da67178dcf5bcc55Robert Ly other common aspects of an animation. 114b3e912102d92c3555aae362da67178dcf5bcc55Robert Ly </p> 12676faeba90f4869a51f0284faa22223f83554fafRobert Ly 13676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p>A tween animation can perform a series of simple transformations (position, size, rotation, 14676faeba90f4869a51f0284faa22223f83554fafRobert Ly and transparency) on the contents of a View object. So, if you have a {@link 15676faeba90f4869a51f0284faa22223f83554fafRobert Ly android.widget.TextView} object, you can move, rotate, grow, or shrink the text. If it has a 16676faeba90f4869a51f0284faa22223f83554fafRobert Ly background image, the background image will be transformed along with the text. The {@link 17676faeba90f4869a51f0284faa22223f83554fafRobert Ly android.view.animation animation package} provides all the classes used in a tween animation.</p> 18676faeba90f4869a51f0284faa22223f83554fafRobert Ly 19676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p>A sequence of animation instructions defines the tween animation, defined by either XML or 20676faeba90f4869a51f0284faa22223f83554fafRobert Ly Android code. As with defining a layout, an XML file is recommended because it's more readable, 21676faeba90f4869a51f0284faa22223f83554fafRobert Ly reusable, and swappable than hard-coding the animation. In the example below, we use XML. (To 22676faeba90f4869a51f0284faa22223f83554fafRobert Ly learn more about defining an animation in your application code, instead of XML, refer to the 23676faeba90f4869a51f0284faa22223f83554fafRobert Ly {@link android.view.animation.AnimationSet} class and other {@link 24676faeba90f4869a51f0284faa22223f83554fafRobert Ly android.view.animation.Animation} subclasses.)</p> 25676faeba90f4869a51f0284faa22223f83554fafRobert Ly 26676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p>The animation instructions define the transformations that you want to occur, when they will 27676faeba90f4869a51f0284faa22223f83554fafRobert Ly occur, and how long they should take to apply. Transformations can be sequential or simultaneous 28676faeba90f4869a51f0284faa22223f83554fafRobert Ly - for example, you can have the contents of a TextView move from left to right, and then rotate 29676faeba90f4869a51f0284faa22223f83554fafRobert Ly 180 degrees, or you can have the text move and rotate simultaneously. Each transformation takes a 30676faeba90f4869a51f0284faa22223f83554fafRobert Ly set of parameters specific for that transformation (starting size and ending size for size 31676faeba90f4869a51f0284faa22223f83554fafRobert Ly change, starting angle and ending angle for rotation, and so on), and also a set of common 32676faeba90f4869a51f0284faa22223f83554fafRobert Ly parameters (for instance, start time and duration). To make several transformations happen 33676faeba90f4869a51f0284faa22223f83554fafRobert Ly simultaneously, give them the same start time; to make them sequential, calculate the start time 34676faeba90f4869a51f0284faa22223f83554fafRobert Ly plus the duration of the preceding transformation.</p> 35676faeba90f4869a51f0284faa22223f83554fafRobert Ly 36676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p>The animation XML file belongs in the <code>res/anim/</code> directory of your Android 37676faeba90f4869a51f0284faa22223f83554fafRobert Ly project. The file must have a single root element: this will be either a single 38676faeba90f4869a51f0284faa22223f83554fafRobert Ly <code><alpha></code>, <code><scale></code>, <code><translate></code>, 39676faeba90f4869a51f0284faa22223f83554fafRobert Ly <code><rotate></code>, interpolator element, or <code><set></code> element that holds 40676faeba90f4869a51f0284faa22223f83554fafRobert Ly groups of these elements (which may include another <code><set></code>). By default, all 41676faeba90f4869a51f0284faa22223f83554fafRobert Ly animation instructions are applied simultaneously. To make them occur sequentially, you must 42676faeba90f4869a51f0284faa22223f83554fafRobert Ly specify the <code>startOffset</code> attribute, as shown in the example below.</p> 43676faeba90f4869a51f0284faa22223f83554fafRobert Ly 44676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p>The following XML from one of the ApiDemos is used to stretch, then simultaneously spin and 45676faeba90f4869a51f0284faa22223f83554fafRobert Ly rotate a View object.</p> 46676faeba90f4869a51f0284faa22223f83554fafRobert Ly <pre> 47676faeba90f4869a51f0284faa22223f83554fafRobert Ly<set android:shareInterpolator="false"> 48676faeba90f4869a51f0284faa22223f83554fafRobert Ly <scale 49676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:interpolator="@android:anim/accelerate_decelerate_interpolator" 50676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:fromXScale="1.0" 51676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:toXScale="1.4" 52676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:fromYScale="1.0" 53676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:toYScale="0.6" 54676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:pivotX="50%" 55676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:pivotY="50%" 56676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:fillAfter="false" 57676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:duration="700" /> 58676faeba90f4869a51f0284faa22223f83554fafRobert Ly <set android:interpolator="@android:anim/decelerate_interpolator"> 59676faeba90f4869a51f0284faa22223f83554fafRobert Ly <scale 60676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:fromXScale="1.4" 61676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:toXScale="0.0" 62676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:fromYScale="0.6" 63676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:toYScale="0.0" 64676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:pivotX="50%" 65676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:pivotY="50%" 66676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:startOffset="700" 67676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:duration="400" 68676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:fillBefore="false" /> 69676faeba90f4869a51f0284faa22223f83554fafRobert Ly <rotate 70676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:fromDegrees="0" 71676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:toDegrees="-45" 72676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:toYScale="0.0" 73676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:pivotX="50%" 74676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:pivotY="50%" 75676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:startOffset="700" 76676faeba90f4869a51f0284faa22223f83554fafRobert Ly android:duration="400" /> 77676faeba90f4869a51f0284faa22223f83554fafRobert Ly </set> 78676faeba90f4869a51f0284faa22223f83554fafRobert Ly</set> 79676faeba90f4869a51f0284faa22223f83554fafRobert Ly</pre> 80676faeba90f4869a51f0284faa22223f83554fafRobert Ly 81676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p>Screen coordinates (not used in this example) are (0,0) at the upper left hand corner, and 82676faeba90f4869a51f0284faa22223f83554fafRobert Ly increase as you go down and to the right.</p> 83676faeba90f4869a51f0284faa22223f83554fafRobert Ly 84676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p>Some values, such as pivotX, can be specified relative to the object itself or relative to the 85676faeba90f4869a51f0284faa22223f83554fafRobert Ly parent. Be sure to use the proper format for what you want ("50" for 50% relative to the parent, 86676faeba90f4869a51f0284faa22223f83554fafRobert Ly or "50%" for 50% relative to itself).</p> 87676faeba90f4869a51f0284faa22223f83554fafRobert Ly 88676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p>You can determine how a transformation is applied over time by assigning an {@link 89676faeba90f4869a51f0284faa22223f83554fafRobert Ly android.view.animation.Interpolator}. Android includes several Interpolator subclasses that 90676faeba90f4869a51f0284faa22223f83554fafRobert Ly specify various speed curves: for instance, {@link android.view.animation.AccelerateInterpolator} 91676faeba90f4869a51f0284faa22223f83554fafRobert Ly tells a transformation to start slow and speed up. Each one has an attribute value that can be 92676faeba90f4869a51f0284faa22223f83554fafRobert Ly applied in the XML.</p> 93676faeba90f4869a51f0284faa22223f83554fafRobert Ly 94676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p>With this XML saved as <code>hyperspace_jump.xml</code> in the <code>res/anim/</code> 95676faeba90f4869a51f0284faa22223f83554fafRobert Ly directory of the project, the following code will reference it and apply it to an {@link 96676faeba90f4869a51f0284faa22223f83554fafRobert Ly android.widget.ImageView} object from the layout.</p> 97676faeba90f4869a51f0284faa22223f83554fafRobert Ly <pre> 98676faeba90f4869a51f0284faa22223f83554fafRobert LyImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage); 99676faeba90f4869a51f0284faa22223f83554fafRobert LyAnimation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump); 100676faeba90f4869a51f0284faa22223f83554fafRobert LyspaceshipImage.startAnimation(hyperspaceJumpAnimation); 101676faeba90f4869a51f0284faa22223f83554fafRobert Ly</pre> 102676faeba90f4869a51f0284faa22223f83554fafRobert Ly 103676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p>As an alternative to <code>startAnimation()</code>, you can define a starting time for the 104676faeba90f4869a51f0284faa22223f83554fafRobert Ly animation with <code>{@link android.view.animation.Animation#setStartTime(long) 105676faeba90f4869a51f0284faa22223f83554fafRobert Ly Animation.setStartTime()}</code>, then assign the animation to the View with <code>{@link 106676faeba90f4869a51f0284faa22223f83554fafRobert Ly android.view.View#setAnimation(android.view.animation.Animation) View.setAnimation()}</code>.</p> 107676faeba90f4869a51f0284faa22223f83554fafRobert Ly 108676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p>For more information on the XML syntax, available tags and attributes, see <a href= 109676faeba90f4869a51f0284faa22223f83554fafRobert Ly "{@docRoot}guide/topics/resources/animation-resource.html">Animation Resources</a>.</p> 110676faeba90f4869a51f0284faa22223f83554fafRobert Ly 111676faeba90f4869a51f0284faa22223f83554fafRobert Ly <p class="note"><strong>Note:</strong> Regardless of how your animation may move or resize, the 112676faeba90f4869a51f0284faa22223f83554fafRobert Ly bounds of the View that holds your animation will not automatically adjust to accommodate it. 113676faeba90f4869a51f0284faa22223f83554fafRobert Ly Even so, the animation will still be drawn beyond the bounds of its View and will not be clipped. 114676faeba90f4869a51f0284faa22223f83554fafRobert Ly However, clipping <em>will occur</em> if the animation exceeds the bounds of the parent View.</p> 115676faeba90f4869a51f0284faa22223f83554fafRobert Ly 116