Android(Lollipop/5.0) Material Design(七) 自定义动画
2024-04-14 06:45:51
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: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">View</span><span class="pln" style="color: rgb(0, 0, 0);"> myView </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> findViewById</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">R</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">id</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">my_view</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// get the center for the clipping circle</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">int</span><span class="pln" style="color: rgb(0, 0, 0);"> cx </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">myView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">getLeft</span><span class="pun" style="color: rgb(102, 102, 0);">()</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">+</span><span class="pln" style="color: rgb(0, 0, 0);"> myView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">getRight</span><span class="pun" style="color: rgb(102, 102, 0);">())</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="lit" style="color: rgb(0, 102, 102);">2</span><span class="pun" style="color: rgb(102, 102, 0);">;</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">int</span><span class="pln" style="color: rgb(0, 0, 0);"> cy </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">myView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">getTop</span><span class="pun" style="color: rgb(102, 102, 0);">()</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">+</span><span class="pln" style="color: rgb(0, 0, 0);"> myView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">getBottom</span><span class="pun" style="color: rgb(102, 102, 0);">())</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="lit" style="color: rgb(0, 102, 102);">2</span><span class="pun" style="color: rgb(102, 102, 0);">;</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// get the final radius for the clipping circle</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">int</span><span class="pln" style="color: rgb(0, 0, 0);"> finalRadius </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> myView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">getWidth</span><span class="pun" style="color: rgb(102, 102, 0);">();</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// create and start the animator for this view</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="com">// (the start radius is zero)</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">Animator</span><span class="pln" style="color: rgb(0, 0, 0);"> anim </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="typ" style="color: rgb(102, 0, 102);">ViewAnimationUtils</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">createCircularReveal</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">myView</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> cx</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> cy</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="lit" style="color: rgb(0, 102, 102);">0</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> finalRadius</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"> anim</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">start</span><span class="pun" style="color: rgb(102, 102, 0);">();</span>
隐藏
<span class="com">// previously visible view</span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="kwd" style="color: rgb(0, 0, 136);">final</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">View</span><span class="pln" style="color: rgb(0, 0, 0);"> myView </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> findViewById</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">R</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">id</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">my_view</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// get the center for the clipping circle</span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="kwd" style="color: rgb(0, 0, 136);">int</span><span class="pln" style="color: rgb(0, 0, 0);"> cx </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">myView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">getLeft</span><span class="pun" style="color: rgb(102, 102, 0);">()</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">+</span><span class="pln" style="color: rgb(0, 0, 0);"> myView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">getRight</span><span class="pun" style="color: rgb(102, 102, 0);">())</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="lit" style="color: rgb(0, 102, 102);">2</span><span class="pun" style="color: rgb(102, 102, 0);">;</span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="kwd" style="color: rgb(0, 0, 136);">int</span><span class="pln" style="color: rgb(0, 0, 0);"> cy </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">myView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">getTop</span><span class="pun" style="color: rgb(102, 102, 0);">()</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">+</span><span class="pln" style="color: rgb(0, 0, 0);"> myView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">getBottom</span><span class="pun" style="color: rgb(102, 102, 0);">())</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="lit" style="color: rgb(0, 102, 102);">2</span><span class="pun" style="color: rgb(102, 102, 0);">;</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// get the initial radius for the clipping circle</span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="kwd" style="color: rgb(0, 0, 136);">int</span><span class="pln" style="color: rgb(0, 0, 0);"> initialRadius </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> myView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">getWidth</span><span class="pun" style="color: rgb(102, 102, 0);">();</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// create the animation (the final radius is zero)</span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="typ" style="color: rgb(102, 0, 102);">Animator</span><span class="pln" style="color: rgb(0, 0, 0);"> anim </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="typ" style="color: rgb(102, 0, 102);">ViewAnimationUtils</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">createCircularReveal</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">myView</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> cx</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> cy</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> initialRadius</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="lit" style="color: rgb(0, 102, 102);">0</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// make the view invisible when the animation is done</span><span class="pln" style="color: rgb(0, 0, 0);">
anim</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">addListener</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">new</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">AnimatorListenerAdapter</span><span class="pun" style="color: rgb(102, 102, 0);">()</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="lit" style="color: rgb(0, 102, 102);">@Override</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="kwd" style="color: rgb(0, 0, 136);">public</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">void</span><span class="pln" style="color: rgb(0, 0, 0);"> onAnimationEnd</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">Animator</span><span class="pln" style="color: rgb(0, 0, 0);"> animation</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="kwd" style="color: rgb(0, 0, 136);">super</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">onAnimationEnd</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">animation</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);">myView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">setVisibility</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">View</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">INVISIBLE</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="pun" style="color: rgb(102, 102, 0);">}</span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="pun" style="color: rgb(102, 102, 0);">});</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// start the animation</span><span class="pln" style="color: rgb(0, 0, 0);">
anim</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">start</span><span class="pun" style="color: rgb(102, 102, 0);">();</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"?>
<resources>
<stylename="MyTheme"parent="@android:style/Theme.Material">
<!-- enable window content transitions -->
<itemname="android:windowContentTransitions">true</item>
<!-- specify enter and exit transitions -->
<itemname="android:windowEnterTransition">@android:transition/explode</item>
<itemname="android:windowExitTransition">@android:transition/explode</item>
<!-- specify shared element transitions -->
<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: rgb(0, 0, 0);"> getWindow</span><span class="pun" style="color: rgb(102, 102, 0);">().</span><span class="pln" style="color: rgb(0, 0, 0);">requestFeature</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">Window</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">FEATURE_CONTENT_TRANSITIONS</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// set an exit transition</span><span class="pln" style="color: rgb(0, 0, 0);"> getWindow</span><span class="pun" style="color: rgb(102, 102, 0);">().</span><span class="pln" style="color: rgb(0, 0, 0);">setExitTransition</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">new</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">Explode</span><span class="pun" style="color: rgb(102, 102, 0);">());</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: rgb(0, 0, 0);">startActivity</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">intent</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="typ" style="color: rgb(102, 0, 102);">ActivityOptions</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">makeSceneTransitionAnimation</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">this</span><span class="pun" style="color: rgb(102, 102, 0);">).</span><span class="pln" style="color: rgb(0, 0, 0);">toBundle</span><span class="pun" style="color: rgb(102, 102, 0);">());</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: rgb(0, 0, 0);">
</span><span class="kwd" style="color: rgb(0, 0, 136);">final</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">View</span><span class="pln" style="color: rgb(0, 0, 0);"> imgContainerView </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> findViewById</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">R</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">id</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">img_container</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// get the common element for the transition in this activity</span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="kwd" style="color: rgb(0, 0, 136);">final</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">View</span><span class="pln" style="color: rgb(0, 0, 0);"> androidRobotView </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> findViewById</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">R</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">id</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">image_small</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// define a click listener</span><span class="pln" style="color: rgb(0, 0, 0);">
imgContainerView</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">setOnClickListener</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">new</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">View</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="typ" style="color: rgb(102, 0, 102);">OnClickListener</span><span class="pun" style="color: rgb(102, 102, 0);">()</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="lit" style="color: rgb(0, 102, 102);">@Override</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="kwd" style="color: rgb(0, 0, 136);">public</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">void</span><span class="pln" style="color: rgb(0, 0, 0);"> onClick</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">View</span><span class="pln" style="color: rgb(0, 0, 0);"> view</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="typ" style="color: rgb(102, 0, 102);">Intent</span><span class="pln" style="color: rgb(0, 0, 0);"> intent </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">new</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">Intent</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">this</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">Activity2</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="kwd" style="color: rgb(0, 0, 136);">class</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// create the transition animation - the images in the layouts</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// of both activities are defined with android:transitionName="robot"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="typ" style="color: rgb(102, 0, 102);">ActivityOptions</span><span class="pln" style="color: rgb(0, 0, 0);"> options </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">ActivityOptions</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">makeSceneTransitionAnimation</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">this</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> androidRobotView</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="str" style="color: rgb(136, 0, 0);">"robot"</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com">// start the new activity</span><span class="pln" style="color: rgb(0, 0, 0);">startActivity</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">intent</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> options</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">toBundle</span><span class="pun" style="color: rgb(102, 102, 0);">());</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="pun" style="color: rgb(102, 102, 0);">}</span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="pun" style="color: rgb(102, 102, 0);">});</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: rgb(102, 0, 102);">ActivityOptions</span><span class="pln" style="color: rgb(0, 0, 0);"> options </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">ActivityOptions</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">makeSceneTransitionAnimation</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">this</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="typ" style="color: rgb(102, 0, 102);">Pair</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">create</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">view1</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="str" style="color: rgb(136, 0, 0);">"agreedName1"</span><span class="pun" style="color: rgb(102, 102, 0);">),</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="typ" style="color: rgb(102, 0, 102);">Pair</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">create</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">view2</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="str" style="color: rgb(136, 0, 0);">"agreedName2"</span><span class="pun" style="color: rgb(102, 102, 0);">));</span>
Use Curved Motion 使用曲线运动
在Material设计中的动画，依赖于曲线的时间插入值和空间运动模式。在android5.0(api21)及以上，可以自定义动画时间曲线和曲线运动模式。
PathInterpolator类是一个新的基于贝塞尔曲线或路径对象的插入器。这个插入器指定了一个1 x1正方形运动曲线，它使用(0,0)为锚点，(1,1)为控制点，作为构造函数的参数。你也可以定义一个path interpolator的xml资源：
<span class="tag" style="color: rgb(0, 0, 136);"><pathInterpolator</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:android</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/apk/res/android"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:controlX1</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"0.4"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:controlY1</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"0"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:controlX2</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"1"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:controlY2</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"1"</span><span class="tag" style="color: rgb(0, 0, 136);">/></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: rgb(102, 0, 102);">ObjectAnimator</span><span class="pln" style="color: rgb(0, 0, 0);"> mAnimator</span><span class="pun" style="color: rgb(102, 102, 0);">;</span><span class="pln" style="color: rgb(0, 0, 0);"> mAnimator </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">ObjectAnimator</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">ofFloat</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">view</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">View</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">X</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="typ" style="color: rgb(102, 0, 102);">View</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">Y</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln" style="color: rgb(0, 0, 0);"> path</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="pun" style="color: rgb(102, 102, 0);">...</span><span class="pln" style="color: rgb(0, 0, 0);"> mAnimator</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">start</span><span class="pun" style="color: rgb(102, 102, 0);">();</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: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><selector</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:android</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/apk/res/android"</span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><item</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:state_pressed</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"true"</span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><set></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><objectAnimator</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:propertyName</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"translationZ"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:duration</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@android:integer/config_shortAnimTime"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:valueTo</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"2dp"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:valueType</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"floatType"</span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com"><!-- you could have other objectAnimator elementshere for "x" and "y", or other properties --></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"></set></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"></item></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><item</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:state_enabled</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"true"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:state_pressed</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"false"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:state_focused</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"true"</span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><set></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><objectAnimator</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:propertyName</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"translationZ"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:duration</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"100"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:valueTo</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"0"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:valueType</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"floatType"</span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"></set></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"></item></span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);"></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: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><animated-selector</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:android</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/apk/res/android"</span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com"><!-- provide a different drawable for each state--></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><item</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:id</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@+id/pressed"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:drawable</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@drawable/drawableP"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:state_pressed</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"true"</span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><item</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:id</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@+id/focused"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:drawable</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@drawable/drawableF"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:state_focused</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"true"</span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><item</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:id</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@id/default"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:drawable</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@drawable/drawableD"</span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="com"><!-- specify a transition --></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><transition</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:fromId</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@+id/default"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:toId</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@+id/pressed"</span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><animation-list></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><item</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:duration</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"15"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:drawable</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@drawable/dt1"</span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><item</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:duration</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"15"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">android:drawable</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@drawable/dt2"</span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln" style="color: rgb(0, 0, 0);">...</span><span class="tag" style="color: rgb(0, 0, 136);"></animation-list></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"></transition></span><span class="pln" style="color: rgb(0, 0, 0);">... </span><span class="tag" style="color: rgb(0, 0, 136);"></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: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><vector</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:android</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/apk/res/android"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:height</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"64dp"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:width</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"64dp"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:viewportHeight</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"600"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:viewportWidth</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"600"</span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><group</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span style="color: inherit;"><span class="atn" style="color: rgb(136, 34, 136);">android:name</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"rotationGroup"</span></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:pivotX</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"300.0"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:pivotY</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"300.0"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:rotation</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"45.0"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><path</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span style="color: inherit;"><span class="atn" style="color: rgb(136, 34, 136);">android:name</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"v"</span></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:fillColor</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"#000000"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:pathData</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"M300,70 l 0,-70 70,70 0,0 -70,70z"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"></group></span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);"></vector></span>
在矢量动画中，引用矢量图定义的名字：
<span class="com"><!-- res/drawable/animvectordrawable.xml --></span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><animated-vector</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:android</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/apk/res/android"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:drawable</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@drawable/vectordrawable"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><target</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:name</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"rotationGroup"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:animation</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@anim/rotation"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><target</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:name</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"v"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:animation</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@anim/path_morph"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);"></animated-vector></span>
以下例子代表了一个 ObjectAnimator or AnimatorSet 对象：动作为旋转360度
<span class="com"><!-- res/anim/rotation.xml --></span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><objectAnimator</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:duration</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"6000"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:propertyName</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"rotation"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:valueFrom</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"0"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:valueTo</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"360"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span>
下面的例子表示矢量图path从一个图形到另一个。两种渐变路径必须一致:他们必须具有相同数量的命令和相同数量的每个命令的参数：
<span class="com"><!-- res/anim/path_morph.xml --></span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><set</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:android</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/apk/res/android"</span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="tag" style="color: rgb(0, 0, 136);"><objectAnimator</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:duration</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"3000"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:propertyName</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"pathData"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:valueFrom</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"M300,70 l 0,-70 70,70 0,0 -70,70z"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:valueTo</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"M300,70 l 0,-70 70,0 0,140 -70,0 z"</span><span class="pln" style="color: rgb(0, 0, 0);"></span><span class="atn" style="color: rgb(136, 34, 136);">android:valueType</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"pathType"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);"></set></span>
更多详见：AnimatedVectorDrawable.
原文地址：
http://blog.csdn.net/jjwwmlp456/article/details/40617495
Android(Lollipop/5.0) Material Design(七) 自定义动画相关推荐
- Android(Lollipop/5.0) Material Design(六) 使用图像
Material Design列 Android(Lollipop/5.0) Material Design(一) 简单介绍 Android(Lollipop/5.0) Material Design ...
- android 5.0跳转动画,android Lollipop(5.0)--activity跳转动画
android Lollipop(5.0)对app中有共享view的activity直接的跳转提供了更好的动画交互. 实现步骤: 1,编写需要的transform. 2,给activity设置样式st ...
- Android 分享会：Material Design 在 Android 中的应用
前言 我刚来这个公司的时候,每个周三都会有分享会,主题自定,分享对象尽量是面向大众,一开始觉得不错,但是到后面发现分享的内容不是那么有营养,而且积极性不是很高,都是当做任务进行分享. 程序员因为较为腼 ...
- Android Lollipop 5.0 经典新特性回顾
*Tamic 专注移动开发! 更多文章请关注 http://blog.csdn.net/sk719887916 虽然Android已到了7.0 ,但是我们还是不能忘怀视觉革命性改变的5.0,今天回顾下 ...
- iOS模仿安卓Material Design的涟漪动画按钮
首先来看看实现后的效果吧 实现思路 其实这个按钮的实现时分简单,我的思路是: - 用UIView + UITapGestureRecognizer 来模拟实现一个按钮的效果 - 记录每次手指点击的位置 ...
- Material Design之定制动画--触摸反馈，循环揭露，转场动画,共享元素和曲线运动
先贴下官网的API https://developer.android.com/training/material/animations.html 触摸反馈: 在按钮属性中添加 android:bac ...
- Android开发之Android Material Design Toolbar自定义随笔
一.自定义Toolbar的menu: 在menu下新建menu.xml文件,自定义menu的样式: 1 <menu xmlns:android="http://schemas.andr ...
- Android Lollipop (5.0) 原生代码 Settings 首页加载逻辑分析
主入口为com.android.settings.Settings. 这只是一个wrapper的类, 它继承于 SettingsActivity类,并且声明了一堆公有的继承于SettingsActiv ...
- Android Material Design按钮样式设计
Today we'll dive deep into Android Buttons in Material Design and develop an application that showca ...
最新文章
- 在Unity中创建3D直升机游戏
- python tornado入门_Tornado入门
- 9月19日下午JavaScript数组冒泡排列和二分法
- 牛皮啊，全网独家SpringCloud Alibaba手打笔记
- camuda流程引擎如此简单「五」
- MySql 扩展存储引擎
- Linux 下wifi 驱动开发（三）—— SDIO接口WiFi驱动浅析
- wxpython textctrl绑键盘事件_wxPython控件学习之TextCtrl（三）响应文本控件事件
- 洛谷 P4549 【模板】裴蜀定理
- [渝粤教育] 西南科技大学 企业生产运作管理 在线考试复习资料2021版
- QCC3005芯片 Line IN 听歌的时候声音比较小
- 自动化测试-uiautomatorviewer.bat
- C# ——字符添加角标
- go-geecache 总结和收获
- 干货分享|数据可视化报表制作技巧
- Cesium 热力图（可直接使用）
- Bootstrap框架和vue哪个好-天道酬勤
- ggplot2的安装
- MDM9205平台射频卡分析
- 大神都在看的五金模具设计之端子模具设计要点
热门文章
- PG-NoSQL特性：json和 jsonb 读写性能测试
- Kernel KNN ( K-Nearest Neighbors )
- Unable to resolve table ‘XXX‘ 的解决方案
- 自主招生 计算机类 自荐信,自主招生类自荐信范文
- 题目39：请帮助Larry写一个程序，通过过去12个月中每月的月末结余，计算平均结余。
- C#与C++联合编程之C#调用C++dll
- 什么是ping指令？Traceroute又是什么？(Powercert animated videos)
- Python——定义一个类来进行北京污染物的可视化（pyecharts绘制折线图、饼图、北京地图）
- 文件服务器个人文件,hfs网络文件服务器
- ssh指定端口用小写 -p , scp指定端口用大写 -P