Android(Lollipop/5.0) Material Design(七) 自定义动画

来源：互联网发布：java课程设计题目大耳编辑：程序博客网时间：2024/06/07 03:44

Android(Lollipop/5.0) Material Design(七) 自定义动画

http://blog.csdn.net/jjwwmlp456/article/details/40617495

Material Design系列

Android(Lollipop/5.0) Material Design(一) 简介

Android(Lollipop/5.0) Material Design(二) 入门指南

Android(Lollipop/5.0) Material Design(三) 使用Material主题

Android(Lollipop/5.0) Material Design(四) 创建列表和卡片

Android(Lollipop/5.0) Material Design(五) 定义阴影和裁剪View

Android(Lollipop/5.0) Material Design(六) 使用图片

Android(Lollipop/5.0) Material Design(七) 自定义动画

Android(Lollipop/5.0) Material Design(八) 保持兼容性

官网地址：https://developer.android.com/training/material/animations.html

动画在Material设计中，为用户与app交互反馈他们的动作行为和提供了视觉上的连贯性。Material主题为Buttons和Activity的过渡提供了一些默认的动画，在android5.0(api21)及以上，允许自定义这些动画：

· Touch feedback 触摸反馈

· Circular Reveal 循环显示

· Activity transitions 活动过渡

· Curved motion 曲线运动

· View state changes 视图状态变化

Customize Touch Feedback 自定义触摸反馈动画

在Material设计中，触摸反馈提供了一种在用户与UI进行交互时即时可视化的确认接触点。关于buttons默认的触摸反馈动画，使用了RippleDrawable类，用一个波纹(涟漪)效果在两种不同的状态间过渡。

在多数情况下，你需要在view的xml定义中，定义它的背景：

?android:attr/selectableItemBackground 有界限的波纹

?android:attr/selectableItemBackgroundBorderless 延伸到view之外的波纹 note：该属性为api21添加

或者，你可以用xml定义一个RippleDrawable类型的资源，并使用波纹属性。

你可以指定一个颜色给RippleDrawable对象，以改变它的默认触摸反馈颜色，使用主题的android:colorControlHighlight属性。

Use the Reveal Effect 使用展现效果

ViewAnimationUtils.createCircularReveal()方法使您能够激活一个循环显示或隐藏一个视图。

显示：

<span class="com">// previously invisible view</span><span class="pln" style="color:#000000;"></span><span class="typ" style="color:#66066;">View</span><span class="pln" style="color:#000000;"> myView </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> findViewById</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">R</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">id</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">my_view</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;"></span><span class="com">// get the center for the clipping circle</span><span class="pln" style="color:#000000;"></span><span class="kwd" style="color:#0088;">int</span><span class="pln" style="color:#000000;"> cx </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">myView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">getLeft</span><span class="pun" style="color:#66660;">()</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">+</span><span class="pln" style="color:#000000;"> myView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">getRight</span><span class="pun" style="color:#66660;">())</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">/</span><span class="pln" style="color:#000000;"> </span><span class="lit" style="color:#06666;">2</span><span class="pun" style="color:#66660;">;</span><span class="pln" style="color:#000000;"></span><span class="kwd" style="color:#0088;">int</span><span class="pln" style="color:#000000;"> cy </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">myView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">getTop</span><span class="pun" style="color:#66660;">()</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">+</span><span class="pln" style="color:#000000;"> myView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">getBottom</span><span class="pun" style="color:#66660;">())</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">/</span><span class="pln" style="color:#000000;"> </span><span class="lit" style="color:#06666;">2</span><span class="pun" style="color:#66660;">;</span><span class="pln" style="color:#000000;"></span><span class="com">// get the final radius for the clipping circle</span><span class="pln" style="color:#000000;"></span><span class="kwd" style="color:#0088;">int</span><span class="pln" style="color:#000000;"> finalRadius </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> myView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">getWidth</span><span class="pun" style="color:#66660;">();</span><span class="pln" style="color:#000000;"></span><span class="com">// create and start the animator for this view</span><span class="pln" style="color:#000000;"></span><span class="com">// (the start radius is zero)</span><span class="pln" style="color:#000000;"></span><span class="typ" style="color:#66066;">Animator</span><span class="pln" style="color:#000000;"> anim </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;">    </span><span class="typ" style="color:#66066;">ViewAnimationUtils</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">createCircularReveal</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">myView</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> cx</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> cy</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> </span><span class="lit" style="color:#06666;">0</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> finalRadius</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;">anim</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">start</span><span class="pun" style="color:#66660;">();</span>

隐藏

<span class="com">// previously visible view</span><span class="pln" style="color:#000000;"></span><span class="kwd" style="color:#0088;">final</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">View</span><span class="pln" style="color:#000000;"> myView </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> findViewById</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">R</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">id</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">my_view</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;"></span><span class="com">// get the center for the clipping circle</span><span class="pln" style="color:#000000;"></span><span class="kwd" style="color:#0088;">int</span><span class="pln" style="color:#000000;"> cx </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">myView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">getLeft</span><span class="pun" style="color:#66660;">()</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">+</span><span class="pln" style="color:#000000;"> myView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">getRight</span><span class="pun" style="color:#66660;">())</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">/</span><span class="pln" style="color:#000000;"> </span><span class="lit" style="color:#06666;">2</span><span class="pun" style="color:#66660;">;</span><span class="pln" style="color:#000000;"></span><span class="kwd" style="color:#0088;">int</span><span class="pln" style="color:#000000;"> cy </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">myView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">getTop</span><span class="pun" style="color:#66660;">()</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">+</span><span class="pln" style="color:#000000;"> myView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">getBottom</span><span class="pun" style="color:#66660;">())</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">/</span><span class="pln" style="color:#000000;"> </span><span class="lit" style="color:#06666;">2</span><span class="pun" style="color:#66660;">;</span><span class="pln" style="color:#000000;"></span><span class="com">// get the initial radius for the clipping circle</span><span class="pln" style="color:#000000;"></span><span class="kwd" style="color:#0088;">int</span><span class="pln" style="color:#000000;"> initialRadius </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> myView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">getWidth</span><span class="pun" style="color:#66660;">();</span><span class="pln" style="color:#000000;"></span><span class="com">// create the animation (the final radius is zero)</span><span class="pln" style="color:#000000;"></span><span class="typ" style="color:#66066;">Animator</span><span class="pln" style="color:#000000;"> anim </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;">    </span><span class="typ" style="color:#66066;">ViewAnimationUtils</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">createCircularReveal</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">myView</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> cx</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> cy</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> initialRadius</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> </span><span class="lit" style="color:#06666;">0</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;"></span><span class="com">// make the view invisible when the animation is done</span><span class="pln" style="color:#000000;">anim</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">addListener</span><span class="pun" style="color:#66660;">(</span><span class="kwd" style="color:#0088;">new</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">AnimatorListenerAdapter</span><span class="pun" style="color:#66660;">()</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">{</span><span class="pln" style="color:#000000;">    </span><span class="lit" style="color:#06666;">@Override</span><span class="pln" style="color:#000000;">    </span><span class="kwd" style="color:#0088;">public</span><span class="pln" style="color:#000000;"> </span><span class="kwd" style="color:#0088;">void</span><span class="pln" style="color:#000000;"> onAnimationEnd</span><span class="pun" style="color:#66660;">(</span><span class="typ" style="color:#66066;">Animator</span><span class="pln" style="color:#000000;"> animation</span><span class="pun" style="color:#66660;">)</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">{</span><span class="pln" style="color:#000000;">        </span><span class="kwd" style="color:#0088;">super</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">onAnimationEnd</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">animation</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;">        myView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">setVisibility</span><span class="pun" style="color:#66660;">(</span><span class="typ" style="color:#66066;">View</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">INVISIBLE</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;">    </span><span class="pun" style="color:#66660;">}</span><span class="pln" style="color:#000000;"></span><span class="pun" style="color:#66660;">});</span><span class="pln" style="color:#000000;"></span><span class="com">// start the animation</span><span class="pln" style="color:#000000;">anim</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">start</span><span class="pun" style="color:#66660;">();</span>

Customize Activity Transitions 定义Activity的过渡动画

·一个enter transition表示，Activity的进入场景。比如一个explode enter transition，表示Views的进入场景：飞快的从外部向屏幕中心移动。

·一个exit transition表示，Activity的离开场景。比如一个explode exit transition，表示Views的离开场景：从屏幕中心散开。

·一个share transition表示，在两个Activity间共享它们的activity transtion。比如，两个Activity有一个相同的图片，而位置和尺寸不同，使用changeImageTransform这个共享元素，能在Activity间平稳的转换和缩放图片。

android5.0(api21)及以上，支持这些效果的transition(过渡)：

爆炸——移动视图或从场景中心。class Explode

滑行——移动视图或从一个场景的边缘。class Slide

淡入淡出——添加或从场景中删除视图通过改变其透明度。 class Fade

也支持这些共享元素(都有对应的class)转换:
　　changeBounds ——View的布局的边界变化。
　　changeClipBounds——View的裁剪边界变化。
　　changeTransform——View的旋转、缩放边界变化
　　changeImageTransform——目标图像的尺寸和缩放变化。
　　当启用活动在你的应用程序转换,默认同时淡出淡入之间的过渡是激活进入和退出活动。

Specify custom transitions 自定义过渡动画

首先需要在定义主题的style中，使用android:windowContentTransitions属性，声明使用transitions。也可以定义使用的Transitions：

<?xmlversion="1.0"encoding="utf-8"?>

<stylename="MyTheme"parent="@android:style/Theme.Material">

<itemname="android:windowContentTransitions">true</item>

<itemname="android:windowEnterTransition">@android:transition/explode</item>

<itemname="android:windowExitTransition">@android:transition/explode</item>

<itemname="android:windowSharedElementEnterTransition">@android:transition/move</item>

<itemname="android:windowSharedElementExitTransition">@android:transition/slide_top</item>

</style>

</resources>

注：每个transition的xml中定义的就是一组change的元素

在代码中启用transitions：

<span class="com">// inside your activity (if you did not enable transitions in your theme)</span><span class="pln" style="color:#000000;">getWindow</span><span class="pun" style="color:#66660;">().</span><span class="pln" style="color:#000000;">requestFeature</span><span class="pun" style="color:#66660;">(</span><span class="typ" style="color:#66066;">Window</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">FEATURE_CONTENT_TRANSITIONS</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;"></span><span class="com">// set an exit transition</span><span class="pln" style="color:#000000;">getWindow</span><span class="pun" style="color:#66660;">().</span><span class="pln" style="color:#000000;">setExitTransition</span><span class="pun" style="color:#66660;">(</span><span class="kwd" style="color:#0088;">new</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">Explode</span><span class="pun" style="color:#66660;">());</span>

在代码中设置transitions的方法还有

Window.setEnterTransition()
Window.setExitTransition()
Window.setSharedElementEnterTransition()
Window.setSharedElementExitTransition()

要想尽快进行transitions过渡，可在Activity中调用Window.setAllowEnterTransitionOverlap()。

Start an activity using transitions 使用过渡启动Activity

如果你要启用transtions并设置为一个Activity的结束exit transtion，当你以如下方式启动另一个Activity时，它将被激活：

<span class="pln" style="color:#000000;">startActivity</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">intent</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;">              </span><span class="typ" style="color:#66066;">ActivityOptions</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">makeSceneTransitionAnimation</span><span class="pun" style="color:#66660;">(</span><span class="kwd" style="color:#0088;">this</span><span class="pun" style="color:#66660;">).</span><span class="pln" style="color:#000000;">toBundle</span><span class="pun" style="color:#66660;">());</span>

当你在另一个Activity中设置了enter transtion，在其启动时，它将被激活。想要disable transitions，那么在启动另一个Activity时：

startActivity(intent,null); //传递null 的options bundle

Start an activity with a shared element 使用一个共享元素启动Acitvity

1.在主题中启用window content

2.在style中定义共享的过渡transitions

3.定义transitions的xml资源 res/transition

4.在layout中调用android:transitionName="" 设置第3步中定义的名字

5.调用 ActivityOptions.makeSceneTransitionAnimation()生成相应的ActivityOptions对象。

<span class="com">// get the element that receives the click event</span><span class="pln" style="color:#000000;"></span><span class="kwd" style="color:#0088;">final</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">View</span><span class="pln" style="color:#000000;"> imgContainerView </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> findViewById</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">R</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">id</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">img_container</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;"></span><span class="com">// get the common element for the transition in this activity</span><span class="pln" style="color:#000000;"></span><span class="kwd" style="color:#0088;">final</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">View</span><span class="pln" style="color:#000000;"> androidRobotView </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> findViewById</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">R</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">id</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">image_small</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;"></span><span class="com">// define a click listener</span><span class="pln" style="color:#000000;">imgContainerView</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">setOnClickListener</span><span class="pun" style="color:#66660;">(</span><span class="kwd" style="color:#0088;">new</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">View</span><span class="pun" style="color:#66660;">.</span><span class="typ" style="color:#66066;">OnClickListener</span><span class="pun" style="color:#66660;">()</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">{</span><span class="pln" style="color:#000000;">    </span><span class="lit" style="color:#06666;">@Override</span><span class="pln" style="color:#000000;">    </span><span class="kwd" style="color:#0088;">public</span><span class="pln" style="color:#000000;"> </span><span class="kwd" style="color:#0088;">void</span><span class="pln" style="color:#000000;"> onClick</span><span class="pun" style="color:#66660;">(</span><span class="typ" style="color:#66066;">View</span><span class="pln" style="color:#000000;"> view</span><span class="pun" style="color:#66660;">)</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">{</span><span class="pln" style="color:#000000;">        </span><span class="typ" style="color:#66066;">Intent</span><span class="pln" style="color:#000000;"> intent </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> </span><span class="kwd" style="color:#0088;">new</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">Intent</span><span class="pun" style="color:#66660;">(</span><span class="kwd" style="color:#0088;">this</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">Activity2</span><span class="pun" style="color:#66660;">.</span><span class="kwd" style="color:#0088;">class</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;">        </span><span class="com">// create the transition animation - the images in the layouts</span><span class="pln" style="color:#000000;">        </span><span class="com">// of both activities are defined with android:transitionName="robot"</span><span class="pln" style="color:#000000;">        </span><span class="typ" style="color:#66066;">ActivityOptions</span><span class="pln" style="color:#000000;"> options </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">ActivityOptions</span><span class="pln" style="color:#000000;">            </span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">makeSceneTransitionAnimation</span><span class="pun" style="color:#66660;">(</span><span class="kwd" style="color:#0088;">this</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> androidRobotView</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> </span><span class="str" style="color:#8800;">"robot"</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;">        </span><span class="com">// start the new activity</span><span class="pln" style="color:#000000;">        startActivity</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">intent</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> options</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">toBundle</span><span class="pun" style="color:#66660;">());</span><span class="pln" style="color:#000000;">    </span><span class="pun" style="color:#66660;">}</span><span class="pln" style="color:#000000;"></span><span class="pun" style="color:#66660;">});</span>

在代码中可以用View.setTransitionName()来设置过渡动画

当你要关闭第二个Activity时，要反转过渡动画，那么可以调用Activity.finishAfterTransition()方法,而不是Activity.finish()。

Start an activity with multiple shared elements 用多共享元素启动Activity

若两个Activity拥有不只一个的共享元素，要在它们之间开始场景transition动画，在它们的layout中都要使用 android:transitionName (或在Activity中代码中调用View.setTransitionName() )来定义，并创建一个如下的 ActivityOptions 对象：

<span class="typ" style="color:#66066;">ActivityOptions</span><span class="pln" style="color:#000000;"> options </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">ActivityOptions</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">makeSceneTransitionAnimation</span><span class="pun" style="color:#66660;">(</span><span class="kwd" style="color:#0088;">this</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;">        </span><span class="typ" style="color:#66066;">Pair</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">create</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">view1</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> </span><span class="str" style="color:#8800;">"agreedName1"</span><span class="pun" style="color:#66660;">),</span><span class="pln" style="color:#000000;">        </span><span class="typ" style="color:#66066;">Pair</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">create</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">view2</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> </span><span class="str" style="color:#8800;">"agreedName2"</span><span class="pun" style="color:#66660;">));</span>

Use Curved Motion 使用曲线运动

在Material设计中的动画，依赖于曲线的时间插入值和空间运动模式。在android5.0(api21)及以上，可以自定义动画时间曲线和曲线运动模式。

PathInterpolator类是一个新的基于贝塞尔曲线或路径对象的插入器。这个插入器指定了一个1 x1正方形运动曲线，它使用(0,0)为锚点，(1,1)为控制点，作为构造函数的参数。你也可以定义一个path interpolator的xml资源：

<span class="tag" style="color:#0088;"><pathInterpolator</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">xmlns:android</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"http://schemas.android.com/apk/res/android"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:controlX1</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"0.4"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:controlY1</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"0"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:controlX2</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"1"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:controlY2</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"1"</span><span class="tag" style="color:#0088;">/></span>

系统提供了三种基本的曲线，XML资源：

@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml

您可以用PathInterpolator对象作Animator.setInterpolator()方法的参数。

ObjectAnimator类有新构造函数使您能够激活坐标沿着一个path同时使用两种或两种以上的属性。比如，如下的animator就使用了一个path 对象，来同时操作View的x和y属性：

<span class="typ" style="color:#66066;">ObjectAnimator</span><span class="pln" style="color:#000000;"> mAnimator</span><span class="pun" style="color:#66660;">;</span><span class="pln" style="color:#000000;">mAnimator </span><span class="pun" style="color:#66660;">=</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">ObjectAnimator</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">ofFloat</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">view</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">View</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">X</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#66066;">View</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">Y</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> path</span><span class="pun" style="color:#66660;">);</span><span class="pln" style="color:#000000;"></span><span class="pun" style="color:#66660;">...</span><span class="pln" style="color:#000000;">mAnimator</span><span class="pun" style="color:#66660;">.</span><span class="pln" style="color:#000000;">start</span><span class="pun" style="color:#66660;">();</span>

Animate View State Changes 视图状态改变动画

StateListAnimator类允许您定义动画运行时视图的状态变化。下面的例子演示如何在xml中定义一个StateListAnimator：

<span class="com"><!-- animate the translationZ property of a view when pressed --></span><span class="pln" style="color:#000000;"></span><span class="tag" style="color:#0088;"><selector</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">xmlns:android</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"http://schemas.android.com/apk/res/android"</span><span class="tag" style="color:#0088;">></span><span class="pln" style="color:#000000;">  </span><span class="tag" style="color:#0088;"><item</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:state_pressed</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"true"</span><span class="tag" style="color:#0088;">></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"><set></span><span class="pln" style="color:#000000;">      </span><span class="tag" style="color:#0088;"><objectAnimator</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:propertyName</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"translationZ"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:duration</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@android:integer/config_shortAnimTime"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:valueTo</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"2dp"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:valueType</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"floatType"</span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">        </span><span class="com"><!-- you could have other objectAnimator elements             here for "x" and "y", or other properties --></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"></set></span><span class="pln" style="color:#000000;">  </span><span class="tag" style="color:#0088;"></item></span><span class="pln" style="color:#000000;">  </span><span class="tag" style="color:#0088;"><item</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:state_enabled</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"true"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:state_pressed</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"false"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:state_focused</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"true"</span><span class="tag" style="color:#0088;">></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"><set></span><span class="pln" style="color:#000000;">      </span><span class="tag" style="color:#0088;"><objectAnimator</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:propertyName</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"translationZ"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:duration</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"100"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:valueTo</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"0"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:valueType</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"floatType"</span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"></set></span><span class="pln" style="color:#000000;">  </span><span class="tag" style="color:#0088;"></item></span><span class="pln" style="color:#000000;"></span><span class="tag" style="color:#0088;"></selector></span>

在上例中，为一个View添加视图状态动画，定义了一个使用selector元素的xml资源，并赋给view的android:stateListAnimator属性。如要在代码中为View指定视图状态动画，可使用AnimationInflater.loadStateListAnimator()加载xml资源，并使用View.setStateListAnimator()将其指定给View。

当你的主题继承了Material主题，按钮默认拥有了z动画。为了避免这种行为在你的按钮，设置android:stateListAnimator属性值为null。

AnimatedStateListDrawable类允许您创建图片以显示关联View的状态改变动画。一些系统的Widget，在5.0上默认使用这些动画。下面的例子显示了如何定义一个AnimatedStateListDrawable作为XML资源:

<span class="com"><!-- res/drawable/myanimstatedrawable.xml --></span><span class="pln" style="color:#000000;"></span><span class="tag" style="color:#0088;"><animated-selector</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">xmlns:android</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"http://schemas.android.com/apk/res/android"</span><span class="tag" style="color:#0088;">></span><span class="pln" style="color:#000000;">    </span><span class="com"><!-- provide a different drawable for each state--></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"><item</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:id</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@+id/pressed"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:drawable</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@drawable/drawableP"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:state_pressed</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"true"</span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"><item</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:id</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@+id/focused"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:drawable</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@drawable/drawableF"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:state_focused</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"true"</span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"><item</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:id</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@id/default"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:drawable</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@drawable/drawableD"</span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">    </span><span class="com"><!-- specify a transition --></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"><transition</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:fromId</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@+id/default"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:toId</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@+id/pressed"</span><span class="tag" style="color:#0088;">></span><span class="pln" style="color:#000000;">        </span><span class="tag" style="color:#0088;"><animation-list></span><span class="pln" style="color:#000000;">            </span><span class="tag" style="color:#0088;"><item</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:duration</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"15"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:drawable</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@drawable/dt1"</span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">            </span><span class="tag" style="color:#0088;"><item</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:duration</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"15"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:drawable</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@drawable/dt2"</span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">            ...        </span><span class="tag" style="color:#0088;"></animation-list></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"></transition></span><span class="pln" style="color:#000000;">    ...</span><span class="tag" style="color:#0088;"></animated-selector></span>

Animate Vector Drawables 矢量图片动画

矢量图片是可伸缩而不失真的。AnimatedVectorDrawable类让你能使一个矢量图动起来。

通常在三种xml定义动态的矢量图：

·使用<vector>元素的矢量图，在res/drawable/

·一个动态矢量图，使用<animated-vector>元素，在res/drawable/

·一个或多个object animator，使用<objectAnimator>元素，在res/animator/

矢量图可以定义的属性元素有<group>和<path>，<group>定义了一个<path>的集合，或者子<group>，<path>定义绘制的路径。

定义矢量图时，可以给<group>和<path>指定一个名字，示例如下：

<span class="com"><!-- res/drawable/vectordrawable.xml --></span><span class="pln" style="color:#000000;"></span><span class="tag" style="color:#0088;"><vector</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">xmlns:android</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"http://schemas.android.com/apk/res/android"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:height</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"64dp"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:width</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"64dp"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:viewportHeight</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"600"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:viewportWidth</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"600"</span><span class="tag" style="color:#0088;">></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"><group</span><span class="pln" style="color:#000000;">        </span><span style="color:inherit;"><span class="atn" style="color:#882288;">android:name</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"rotationGroup"</span></span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:pivotX</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"300.0"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:pivotY</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"300.0"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:rotation</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"45.0"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">></span><span class="pln" style="color:#000000;">        </span><span class="tag" style="color:#0088;"><path</span><span class="pln" style="color:#000000;">            </span><span style="color:inherit;"><span class="atn" style="color:#882288;">android:name</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"v"</span></span><span class="pln" style="color:#000000;">            </span><span class="atn" style="color:#882288;">android:fillColor</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"#000000"</span><span class="pln" style="color:#000000;">            </span><span class="atn" style="color:#882288;">android:pathData</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"M300,70 l 0,-70 70,70 0,0 -70,70z"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"></group></span><span class="pln" style="color:#000000;"></span><span class="tag" style="color:#0088;"></vector></span>

在矢量动画中，引用矢量图定义的名字：

<span class="com"><!-- res/drawable/animvectordrawable.xml --></span><span class="pln" style="color:#000000;"></span><span class="tag" style="color:#0088;"><animated-vector</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">xmlns:android</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"http://schemas.android.com/apk/res/android"</span><span class="pln" style="color:#000000;">  </span><span class="atn" style="color:#882288;">android:drawable</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@drawable/vectordrawable"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"><target</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:name</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"rotationGroup"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:animation</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@anim/rotation"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"><target</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:name</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"v"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:animation</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"@anim/path_morph"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;"></span><span class="tag" style="color:#0088;"></animated-vector></span>

以下例子代表了一个 ObjectAnimator or AnimatorSet 对象：动作为旋转360度

<span class="com"><!-- res/anim/rotation.xml --></span><span class="pln" style="color:#000000;"></span><span class="tag" style="color:#0088;"><objectAnimator</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:duration</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"6000"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:propertyName</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"rotation"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:valueFrom</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"0"</span><span class="pln" style="color:#000000;">    </span><span class="atn" style="color:#882288;">android:valueTo</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"360"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">/></span>

下面的例子表示矢量图path从一个图形到另一个。两种渐变路径必须一致:他们必须具有相同数量的命令和相同数量的每个命令的参数：

<span class="com"><!-- res/anim/path_morph.xml --></span><span class="pln" style="color:#000000;"></span><span class="tag" style="color:#0088;"><set</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">xmlns:android</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"http://schemas.android.com/apk/res/android"</span><span class="tag" style="color:#0088;">></span><span class="pln" style="color:#000000;">    </span><span class="tag" style="color:#0088;"><objectAnimator</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:duration</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"3000"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:propertyName</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"pathData"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:valueFrom</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"M300,70 l 0,-70 70,70 0,0   -70,70z"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:valueTo</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"M300,70 l 0,-70 70,0  0,140 -70,0 z"</span><span class="pln" style="color:#000000;">        </span><span class="atn" style="color:#882288;">android:valueType</span><span class="pun" style="color:#66660;">=</span><span class="atv" style="color:#8800;">"pathType"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#0088;">/></span><span class="pln" style="color:#000000;"></span><span class="tag" style="color:#0088;"></set></span>

0 0