diff options
Diffstat (limited to 'docs/html/preview/material/animations.jd')
| -rw-r--r-- | docs/html/preview/material/animations.jd | 441 |
1 files changed, 441 insertions, 0 deletions
diff --git a/docs/html/preview/material/animations.jd b/docs/html/preview/material/animations.jd new file mode 100644 index 0000000..b8d063b --- /dev/null +++ b/docs/html/preview/material/animations.jd @@ -0,0 +1,441 @@ +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> - Mades 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 screne 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>
\ No newline at end of file |