| page.title=Animations |
| |
| @jd:body |
| |
| <div id="qv-wrapper"> |
| <div id="qv"> |
| <h2>In this document</h2> |
| <ol> |
| <li><a href="#touch">Touch Feedback</a></li> |
| <li><a href="#reveal">Reveal Effect</a></li> |
| <li><a href="#transitions">Activity Transitions</a></li> |
| <li><a href="#curvedmotion">Curved Motion</a></li> |
| <li><a href="#viewstate">Animating View State Changes</a></li> |
| <li><a href="#drawabletint">Drawable Tinting</a></li> |
| <li><a href="#colorextract">Extracting Colors from an Image</a></li> |
| </ol> |
| </div> |
| </div> |
| |
| <p>Animations in material design give users feedback on their actions and provide visual |
| continuity as users interact with your app. The material theme provides some default animations |
| for buttons and activity transitions, and the Android L Developer Preview provides additional |
| APIs that let you customize these animations and create new ones:</p> |
| |
| <ul> |
| <li>Touch feedback</li> |
| <li>Reveal effect</li> |
| <li>Activity transitions</li> |
| <li>Curved motion</li> |
| <li>View state changes</li> |
| </ul> |
| |
| |
| <h2 id="touch">Touch Feedback</h2> |
| |
| <p>The default touch feedback animations for buttons use the new |
| <code>RippleDrawable</code> class, which transitions between different states with a ripple |
| effect.</p> |
| |
| <p>In most cases, this functionality should be applied in your view XML by specifying the |
| background as <code>?android:attr/selectableItemBackground</code> for a bounded ripple or |
| <code>?android:attr/selectableItemBackgroundBorderless</code> for a ripple that extends beyond |
| the view bounds. You can also create a <code>RippleDrawable</code> and set |
| it as the background of your view. Alternatively, you can define a <code>RippleDrawable</code> |
| as an XML resource using the <code>ripple</code> element. The |
| Android L Developer Preview animates the selection color with a ripple effect.</p> |
| |
| <p>You can assign a color to <code>RippleDrawable</code> objects. To change the default touch |
| feedback color, use the theme's <code>android:colorControlHighlight</code> attribute.</p> |
| |
| |
| <h2 id="reveal">Reveal Effect</h2> |
| |
| <p>The <code>ViewAnimationUtils.createCircularReveal</code> method enables you to animate a |
| clipping circle to reveal or hide a view.</p> |
| |
| <p>To reveal a previously invisible view using this effect:</p> |
| |
| <pre> |
| // previously invisible view |
| View myView = findViewById(R.id.my_view); |
| |
| // get the center for the clipping circle |
| int cx = (myView.getLeft() + myView.getRight()) / 2; |
| int cy = (myView.getTop() + myView.getBottom()) / 2; |
| |
| // get the final radius for the clipping circle |
| int finalRadius = myView.getWidth(); |
| |
| // create and start the animator for this view |
| // (the start radius is zero) |
| ValueAnimator anim = |
| ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); |
| anim.start(); |
| </pre> |
| |
| <p>To hide a previously visible view using this effect:</p> |
| |
| <pre> |
| // previously visible view |
| final View myView = findViewById(R.id.my_view); |
| |
| // get the center for the clipping circle |
| int cx = (myView.getLeft() + myView.getRight()) / 2; |
| int cy = (myView.getTop() + myView.getBottom()) / 2; |
| |
| // get the initial radius for the clipping circle |
| int initialRadius = myView.getWidth(); |
| |
| // create the animation (the final radius is zero) |
| ValueAnimator anim = |
| ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0); |
| |
| // make the view invisible when the animation is done |
| anim.addListener(new AnimatorListenerAdapter() { |
| @Override |
| public void onAnimationEnd(Animator animation) { |
| super.onAnimationEnd(animation); |
| myView.setVisibility(View.INVISIBLE); |
| } |
| }); |
| |
| // start the animation |
| anim.start(); |
| </pre> |
| |
| |
| <h2 id="transitions">Activity Transitions</h2> |
| |
| <p>You can specify custom animations for enter and exit transitions and for |
| transitions of shared elements between activities.</p> |
| |
| <ul> |
| <li>An <strong>enter</strong> transition determines how views in an activity enter the scene. |
| For example, in the <em>explode</em> enter transition, the views enter the scene from the outside |
| and fly in towards the center of the screen.</li> |
| |
| <li>An <strong>exit</strong> transition determines how views in an activity exit the scene. For |
| example, in the <em>explode</em> exit transition, the views exit the scene away from the |
| center.</li> |
| |
| <li>A <strong>shared elements</strong> transition determines how views that are shared between |
| two activities transition between these activities. For example, if two activities have the same |
| image in different positions and sizes, the <em>moveImage</em> shared element transition |
| translates and scales the image smoothly between these activities.</li> |
| </ul> |
| |
| <p>The Android L Developer Preview supports these enter and exit transitions:</p> |
| |
| <ul> |
| <li><em>explode</em> - Moves views in or out from the center of the scene.</li> |
| <li><em>slide</em> - Moves views in or out from one of the edges of the scene.</li> |
| <li><em>fade</em> - Moves views in or out of the scene.</li> |
| </ul> |
| |
| <p>Any transition that extends the <code>android.transition.Visibility</code> class is supported |
| as an enter or exit transition. For more information, see the API reference for the |
| <code>android.transition.Transition</code> class.</p> |
| |
| <p>The Android L Developer Preview also supports these shared elements transitions:</p> |
| |
| <ul> |
| <li><em>changeBounds</em> - Animates the changes in layout bounds of target views.</li> |
| <li><em>changeClipBounds</em> - Animates the changes in clip bounds of target views.</li> |
| <li><em>changeTransform</em> - Animates the changes in scale and rotation of target views.</li> |
| <li><em>moveImage</em> - Animates changes in size and scale type for an image view.</li> |
| </ul> |
| |
| <p>When you enable activity transitions in your app, the default cross-fading transition is |
| activated between the entering and exiting activities.</p> |
| |
| <img src="/preview/material/images/SceneTransition.png" alt="" |
| id="figure1" style="width:600px;margin-top:20px"/> |
| <p class="img-caption"> |
| <strong>Figure 1</strong> - A scene transition with one shared element. |
| </p> |
| |
| <h3>Specify custom transitions</h3> |
| |
| <p>First, enable window content transitions with the <code>android:windowContentTransitions</code> |
| attribute when you define a style that inherits from the material theme. You can also specify |
| enter, exit, and shared element transitions in your style definition:</p> |
| |
| <pre> |
| <style name="BaseAppTheme" parent="android:Theme.Material"> |
| <!-- enable window content transitions --> |
| <item name="android:windowContentTransitions">true</item> |
| |
| <!-- specify enter and exit transitions --> |
| <item name="android:windowEnterTransition">@transition/explode</item> |
| <item name="android:windowExitTransition">@transition/explode</item> |
| |
| <!-- specify shared element transitions --> |
| <item name="android:windowSharedElementEnterTransition"> |
| @transition/move_image</item> |
| <item name="android:windowSharedElementExitTransition"> |
| @transition/move_image</item> |
| </style> |
| </pre> |
| |
| <p>The <code>move_image</code> transition in this example is defined as follows:</p> |
| |
| <pre> |
| <!-- res/transition/move_image.xml --> |
| <!-- (see also Shared Transitions below) --> |
| <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> |
| <moveImage/> |
| </transitionSet> |
| </pre> |
| |
| <p>The <code>moveImage</code> element corresponds to the <code>android.transition.MoveImage</code> |
| class. For more information, see the API reference for <code>android.transition.Transition</code>. |
| </p> |
| |
| <p>To enable window content transitions in your code instead, call the |
| <code>Window.requestFeature</code> method:</p> |
| |
| <pre> |
| // inside your activity (if you did not enable transitions in your theme) |
| getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); |
| |
| // set an exit transition |
| getWindow().setExitTransition(new Explode()); |
| </pre> |
| |
| <p>To specify transitions in your code, call these methods with a <code>Transition</code> |
| object:</p> |
| |
| <ul> |
| <li><code>Window.setEnterTransition</code></li> |
| <li><code>Window.setExitTransition</code></li> |
| <li><code>Window.setSharedElementEnterTransition</code></li> |
| <li><code>Window.setSharedElementExitTransition</code></li> |
| </ul> |
| |
| <p>The <code>setExitTransition</code> and <code>setSharedElementExitTransition</code> methods |
| define the exit transition for the calling activity. The <code>setEnterTransition</code> and |
| <code>setSharedElementEnterTransition</code> methods define the enter transition for the called |
| activity.</p> |
| |
| <p>To get the full effect of a transition, you must enable window content transitions on both the |
| calling and called activities. Otherwise, the calling activity will start the exit transition, |
| but then you'll see a window transition (like scale or fade).</p> |
| |
| <p>To start an enter transition as soon as possible, use the |
| <code>Window.setAllowEnterTransitionOverlap</code> method on the called activity. This lets you |
| have more dramatic enter transitions. The same applies for the calling activity and exit |
| transitions with the <code>Window.setAllowExitTransitionOverlap</code> method.</p> |
| |
| <h3>Start an activity using transitions</h3> |
| |
| <p>If you enable transitions and set an exit transition for an activity, the transition is activated |
| when you launch another activity with the <code>startActivity</code> method. If you have set an |
| enter transition for the second activity, the transition is also activated when the activity |
| starts.</p> |
| |
| <h3>Shared elements transitions</h3> |
| |
| <p>To make a screen transition animation between two activities that have a shared element:</p> |
| |
| <ol> |
| <li>Enable window content transitions in your style.</li> |
| <li>Specify a shared elements transition in your style.</li> |
| <li>Define your transition as an XML resource.</li> |
| <li>Assign a common name to the shared elements in both layouts with the |
| <code>android:viewName</code> attribute.</li> |
| <li>Use the <code>ActivityOptions.makeSceneTransitionAnimation</code> method.</li> |
| </ol> |
| |
| <pre> |
| // get the element that receives the click event |
| final View imgContainerView = findViewById(R.id.img_container); |
| |
| // get the common element for the transition in this activity |
| final View androidRobotView = findViewById(R.id.image_small); |
| |
| // define a click listener |
| imgContainerView.setOnClickListener(new View.OnClickListener() { |
| @Override |
| public void onClick(View view) { |
| Intent intent = new Intent(this, Activity2.class); |
| // create the transition animation - the images in the layouts |
| // of both activities are defined with android:viewName="robot" |
| ActivityOptions options = ActivityOptions |
| .makeSceneTransitionAnimation(this, androidRobotView, "robot"); |
| // start the new activity |
| startActivity(intent, options.toBundle()); |
| } |
| }); |
| </pre> |
| |
| <p>For shared dynamic views that you generate in your code, use the <code>View.setViewName</code> |
| method to specify a common element name in both activities.</p> |
| |
| <p>To reverse the scene transition animation when you finish the second activity, call the |
| <code>Activity.finishAfterTransition</code> method instead of <code>Activity.finish</code>.</p> |
| |
| <h3>Multiple shared elements</h3> |
| |
| <p>To make a scene transition animation between two activities that have more than one shared |
| element, define the shared elements in both layouts with the <code>android:viewName</code> |
| attribute (or use the <code>View.setViewName</code> in both activities), and create an |
| <code>ActivityOptions</code> object as follows:</p> |
| |
| <pre> |
| ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, |
| Pair.create(view1, "agreedName1"), |
| Pair.create(view2, "agreedName2")); |
| </pre> |
| |
| |
| <h2 id="curvedmotion">Curved Motion</h2> |
| |
| <p>Animations in material design rely on curves for time interpolation and spatial movement |
| patterns. The Android L Developer Preview provides new APIs that enable you to define custom |
| timing curves and curved motion patterns for animations.</p> |
| |
| <p>The <code>PathInterpolator</code> class is a new interpolator based on a Bézier curve or a |
| <code>Path</code> object. This interpolator specifies a motion curve in a 1x1 square, with anchor |
| points at (0,0) and (1,1) and control points as specified using the constructor arguments. You can |
| also define a <code>PathInterpolator</code> as an XML resource:</p> |
| |
| <pre> |
| <pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" |
| android:controlX1="0.4" |
| android:controlY1="0" |
| android:controlX2="1" |
| android:controlY2="1"/> |
| </pre> |
| |
| <p>The Android L Developer Preview provides XML resources for the three basic curves in the |
| material design specification:</p> |
| |
| <ul> |
| <li><code>@interpolator/fast_out_linear_in.xml</code></li> |
| <li><code>@interpolator/fast_out_slow_in.xml</code></li> |
| <li><code>@interpolator/linear_out_slow_in.xml</code></li> |
| </ul> |
| |
| <p>You can pass a <code>PathInterpolator</code> object to the |
| <code>Animator.setInterpolation</code> method.</p> |
| |
| <p>The <code>ObjectAnimator</code> class has new constructors that enable you to animate |
| coordinates along a path using two or more properties at once. For example, the following animator |
| uses a <code>Path</code> object to animate the X and Y properties of a view:</p> |
| |
| <pre> |
| ObjectAnimator mAnimator; |
| mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path); |
| ... |
| mAnimator.start(); |
| </pre> |
| |
| |
| <h2 id="viewstate">Animating View State Changes</h2> |
| |
| <p>The new <code>StateListAnimator</code> class lets you define animators that run when the state |
| of a view changes. The following example shows how to define an <code>StateListAnimator</code> as |
| an XML resource:</p> |
| |
| <pre> |
| <!-- animate the translationZ property of a view when pressed --> |
| <selector xmlns:android="http://schemas.android.com/apk/res/android"> |
| <item android:state_pressed="true"> |
| <set> |
| <objectAnimator android:propertyName="translationZ" |
| android:duration="100" |
| android:valueTo="2" |
| android:valueType="floatType"/> |
| <!-- you could have other objectAnimator elements |
| here for "x" and "y", or other properties --> |
| </set> |
| </item> |
| <item android:state_enabled="true" |
| android:state_pressed="false" |
| android:state_focused="true"> |
| <set> |
| <objectAnimator android:propertyName="translationZ" |
| android:duration="100" |
| android:valueTo="2" |
| android:valueType="floatType"/> |
| </set> |
| </item> |
| </selector> |
| </pre> |
| |
| <p class="note"><strong>Note:</strong> There is a known issue in the L Developer Preview release |
| that requires valueFrom values to be provided in StateListAnimator animations to get the correct |
| behavior.</p> |
| |
| <p>The new <code>AnimatedStateListDrawable</code> class lets you create drawables that show |
| animations between state changes of the associated view. Some of the system widgets in the |
| Android L Developer Preview use these animations by default. The following example shows how |
| to define an <code>AnimatedStateListDrawable</code> as an XML resource:</p> |
| |
| <pre> |
| <!-- res/drawable/myanimstatedrawable.xml --> |
| <animated-selector |
| xmlns:android="http://schemas.android.com/apk/res/android"> |
| |
| <!-- provide a different drawable for each state--> |
| <item android:id="@+id/pressed" android:drawable="@drawable/drawableP" |
| android:state_pressed="true"/> |
| <item android:id="@+id/focused" android:drawable="@drawable/drawableF" |
| android:state_focused="true"/> |
| <item android:id="@id/default" |
| android:drawable="@drawable/drawableD"/> |
| |
| <!-- specify a transition --> |
| <transition android:fromId="@+id/default" android:toId="@+id/pressed"> |
| <animation-list> |
| <item android:duration="15" android:drawable="@drawable/dt1"/> |
| <item android:duration="15" android:drawable="@drawable/dt2"/> |
| ... |
| </animation-list> |
| </transition> |
| ... |
| </animated-selector> |
| </pre> |
| |
| |
| <h2 id="drawabletint">Drawable Tinting</h2> |
| |
| <p>The Android L Developer Preview enables you to define bitmaps or nine-patches as alpha masks and |
| to tint them using a color resource or a theme attribute that resolves to a color resource (for |
| example, <code>?android:attr/colorPrimary</code>). You can create these assets only once and color them |
| automatically to match your theme.</p> |
| |
| <p>To apply a tint to a bitmap, use the <code>setTint</code> method or the <code>android:tint</code> |
| attribute for <code>BitmapDrawable</code> and <code>NinePatchDrawable</code>.</p> |
| |
| <p>The <code>setTint</code> method also lets you set the Porter-Duff mode used to blend the |
| tint color for <code>NinePatchDrawable</code> and <code>BitmapDrawable</code> objects in your code. |
| To set the tint mode in your layouts, use the <code>android:tintMode</code> attribute.</p> |
| |
| |
| <h2 id="colorextract">Extracting Prominent Colors from an Image</h2> |
| |
| <p>The Android L Developer Preview Support Library includes the <code>Palette</code> class, |
| which lets you extract prominent colors from an image. This class extracts the following |
| prominent colors:</p> |
| |
| <ul> |
| <li>Vibrant</li> |
| <li>Vibrant dark</li> |
| <li>Vibrant light</li> |
| <li>Muted</li> |
| <li>Muted dark</li> |
| <li>Muted light</li> |
| </ul> |
| |
| <p>To extract these colors, pass a <code>Bitmap</code> object to the |
| <code>Palette.generate</code> static method in the background thread where you load your images. |
| If you can't use that thread, call the <code>Palette.generateAsync</code> method instead and |
| provide a listener.</p> |
| |
| <p>To retrieve the prominent colors from the image, use the getter methods in the |
| <code>Palette</code> class, such as <code>Palette.getVibrantColor</code>.</p> |
| |
| <p>For more information, see the API reference for the |
| <code>android.support.v7.graphics.Palette</code> class.</p> |