Android应用开发之所有动画使用详解
黑色的火焰
9年前
<p>题外话：有段时间没有更新博客了，这篇文章也是之前写了一半一直放在草稿箱，今天抽空把剩余的补上的。消失的这段时间真的好忙，节奏一下子有些适应不过来，早晨七点四十就得醒来，晚上九点四十才准备下班，好像最近都与世隔离了一样；然而自己每天还要熟悉一大套自己不熟悉、各种协议差异的代码。其实换个角度考虑还是蛮好的，忙，但很充实，有新的挑战与收获。</p> <h2><strong>1 背景</strong></h2> <p>不能只分析源码呀，分析的同时也要整理归纳基础知识，刚好有人微博私信让全面说说Android的动画，所以今天来一发Android应用的各种Animation大集合。英文厉害的请直接移步参考<a href="/misc/goto?guid=4959675124830772439">Android Developer</a>。</p> <p>Android系统提供了很多丰富的API去实现UI的2D与3D动画，最主要的划分可以分为如下几类：</p> <ul> <li> <p><strong>View Animation：</strong> 视图动画在古老的Android版本系统中就已经提供了，只能被用来设置View的动画。</p> </li> <li> <p><strong>Drawable Animation：</strong> 这种动画（也叫Frame动画、帧动画）其实可以划分到视图动画的类别，专门用来一个一个的显示Drawable的resources，就像放幻灯片一样。</p> </li> <li> <p><strong>Property Animation：</strong> 属性动画只对Android 3.0（API 11）以上版本的Android系统才有效，这种动画可以设置给任何Object，包括那些还没有渲染到屏幕上的对象。这种动画是可扩展的，可以让你自定义任何类型和属性的动画。</p> </li> </ul> <p>可以看见，当前应用程序开发涉及的主要动画也就这三大类，我们接下来以类别为基础来慢慢展开说明。</p> <h2><strong>2 View Animation（视图动画）使用详解</strong></h2> <h3><strong>2-1 视图动画概述</strong></h3> <p>视图动画，也叫Tween（补间）动画可以在一个视图容器内执行一系列简单变换（位置、大小、旋转、透明度）。譬如，如果你有一个TextView对象，您可以移动、旋转、缩放、透明度设置其文本，当然，如果它有一个背景图像，背景图像会随着文本变化。</p> <p>补间动画通过XML或Android代码定义，建议使用XML文件定义，因为它更具可读性、可重用性。</p> <p>如下是视图动画相关的类继承关系：</p> <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/f901580e5cf42798ea61416fe1a50865.png"></p> <table> <thead> <tr> <th>java类名</th> <th>xml关键字</th> <th>描述信息</th> </tr> </thead> <tbody> <tr> <td>AlphaAnimation</td> <td><code><alpha></code> 放置在res/anim/目录下</td> <td>渐变透明度动画效果</td> </tr> <tr> <td>RotateAnimation</td> <td><code><rotate></code> 放置在res/anim/目录下</td> <td>画面转移旋转动画效果</td> </tr> <tr> <td>ScaleAnimation</td> <td><code><scale></code> 放置在res/anim/目录下</td> <td>渐变尺寸伸缩动画效果</td> </tr> <tr> <td>TranslateAnimation</td> <td><code><translate></code> 放置在res/anim/目录下</td> <td>画面转换位置移动动画效果</td> </tr> <tr> <td>AnimationSet</td> <td><code><set></code> 放置在res/anim/目录下</td> <td>一个持有其它动画元素alpha、scale、translate、rotate或者其它set元素的容器</td> </tr> </tbody> </table> <p>通过上图和上表可以直观的看出来补间动画的关系及种类了吧，接下来我们就详细一个一个的介绍一下各种补间动画。</p> <h3><strong>2-2 视图动画详细说明</strong></h3> <p>可以看出来Animation抽象类是所有补间动画类的基类，所以基类会提供一些通用的动画属性方法，如下我们就来详细看看这些属性，关于这些属性详细官方解释<a href="/misc/goto?guid=4959675124910513805">KX上网点击我</a>或者<a href="/misc/goto?guid=4959675124993474153">KX上网点击我</a>。</p> <p><strong>2-2-1 Animation属性详解</strong></p> <table> <thead> <tr> <th>xml属性</th> <th>java方法</th> <th>解释</th> </tr> </thead> <tbody> <tr> <td>android:detachWallpaper</td> <td>setDetachWallpaper(boolean)</td> <td>是否在壁纸上运行</td> </tr> <tr> <td>android:duration</td> <td>setDuration(long)</td> <td>动画持续时间，毫秒为单位</td> </tr> <tr> <td>android:fillAfter</td> <td>setFillAfter(boolean)</td> <td>控件动画结束时是否保持动画最后的状态</td> </tr> <tr> <td>android:fillBefore</td> <td>setFillBefore(boolean)</td> <td>控件动画结束时是否还原到开始动画前的状态</td> </tr> <tr> <td>android:fillEnabled</td> <td>setFillEnabled(boolean)</td> <td>与android:fillBefore效果相同</td> </tr> <tr> <td>android:interpolator</td> <td>setInterpolator(Interpolator)</td> <td>设定插值器（指定的动画效果，譬如回弹等）</td> </tr> <tr> <td>android:repeatCount</td> <td>setRepeatCount(int)</td> <td>重复次数</td> </tr> <tr> <td>android:repeatMode</td> <td>setRepeatMode(int)</td> <td>重复类型有两个值，reverse表示倒序回放，restart表示从头播放</td> </tr> <tr> <td>android:startOffset</td> <td>setStartOffset(long)</td> <td>调用start函数之后等待开始运行的时间，单位为毫秒</td> </tr> <tr> <td>android:zAdjustment</td> <td>setZAdjustment(int)</td> <td>表示被设置动画的内容运行时在Z轴上的位置（top/bottom/normal），默认为normal</td> </tr> </tbody> </table> <p><br> 也就是说，无论我们补间动画的哪一种都已经具备了这种属性，也都可以设置使用这些属性中的一个或多个。</p> <p>那接下来我们就看看每种补间动画特有的一些属性说明吧。</p> <p><strong>2-2-2 Alpha属性详解</strong></p> <table> <thead> <tr> <th>xml属性</th> <th>java方法</th> <th>解释</th> </tr> </thead> <tbody> <tr> <td>android:fromAlpha</td> <td>AlphaAnimation(float fromAlpha, …)</td> <td>动画开始的透明度（0.0到1.0，0.0是全透明，1.0是不透明）</td> </tr> <tr> <td>android:toAlpha</td> <td>AlphaAnimation(…, float toAlpha)</td> <td>动画结束的透明度，同上</td> </tr> </tbody> </table> <p><strong>2-2-3 Rotate属性详解</strong></p> <table> <thead> <tr> <th>xml属性</th> <th>java方法</th> <th>解释</th> </tr> </thead> <tbody> <tr> <td>android:fromDegrees</td> <td>RotateAnimation(float fromDegrees, …)</td> <td>旋转开始角度，正代表顺时针度数，负代表逆时针度数</td> </tr> <tr> <td>android:toDegrees</td> <td>RotateAnimation(…, float toDegrees, …)</td> <td>旋转结束角度，正代表顺时针度数，负代表逆时针度数</td> </tr> <tr> <td>android:pivotX</td> <td>RotateAnimation(…, float pivotX, …)</td> <td>缩放起点X坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）</td> </tr> <tr> <td>android:pivotY</td> <td>RotateAnimation(…, float pivotY)</td> <td>缩放起点Y坐标，同上规律</td> </tr> </tbody> </table> <p><strong>2-2-4 Scale属性详解</strong></p> <table> <thead> <tr> <th>xml属性</th> <th>java方法</th> <th>解释</th> </tr> </thead> <tbody> <tr> <td>android:fromXScale</td> <td>ScaleAnimation(float fromX, …)</td> <td>初始X轴缩放比例，1.0表示无变化</td> </tr> <tr> <td>android:toXScale</td> <td>ScaleAnimation(…, float toX, …)</td> <td>结束X轴缩放比例</td> </tr> <tr> <td>android:fromYScale</td> <td>ScaleAnimation(…, float fromY, …)</td> <td>初始Y轴缩放比例</td> </tr> <tr> <td>android:toYScale</td> <td>ScaleAnimation(…, float toY, …)</td> <td>结束Y轴缩放比例</td> </tr> <tr> <td>android:pivotX</td> <td>ScaleAnimation(…, float pivotX, …)</td> <td>缩放起点X轴坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）</td> </tr> <tr> <td>android:pivotY</td> <td>ScaleAnimation(…, float pivotY)</td> <td>缩放起点Y轴坐标，同上规律</td> </tr> </tbody> </table> <p><strong>2-2-5 Translate属性详解</strong></p> <table> <thead> <tr> <th>xml属性</th> <th>java方法</th> <th>解释</th> </tr> </thead> <tbody> <tr> <td>android:fromXDelta</td> <td>TranslateAnimation(float fromXDelta, …)</td> <td>起始点X轴坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）</td> </tr> <tr> <td>android:fromYDelta</td> <td>TranslateAnimation(…, float fromYDelta, …)</td> <td>起始点Y轴从标，同上规律</td> </tr> <tr> <td>android:toXDelta</td> <td>TranslateAnimation(…, float toXDelta, …)</td> <td>结束点X轴坐标，同上规律</td> </tr> <tr> <td>android:toYDelta</td> <td>TranslateAnimation(…, float toYDelta)</td> <td>结束点Y轴坐标，同上规律</td> </tr> </tbody> </table> <p><strong>2-2-6 AnimationSet详解</strong></p> <p>AnimationSet继承自Animation，是上面四种的组合容器管理类，没有自己特有的属性，他的属性继承自Animation，所以特别注意，<strong><em>当我们对set标签使用Animation的属性时会对该标签下的所有子控件都产生影响。</em></strong></p> <h3><strong>2-3 视图动画使用方法</strong></h3> <p>通过上面对于动画的属性介绍之后我们来看看在Android中这些动画如何使用（PS：这里直接演示xml方式，至于java方式太简单了就不说了），如下：</p> <pre> <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@[package:]anim/interpolator_resource" android:shareInterpolator=["true" | "false"] > <alpha android:fromAlpha="float" android:toAlpha="float" /> <scale android:fromXScale="float" android:toXScale="float" android:fromYScale="float" android:toYScale="float" android:pivotX="float" android:pivotY="float" /> <translate android:fromXDelta="float" android:toXDelta="float" android:fromYDelta="float" android:toYDelta="float" /> <rotate android:fromDegrees="float" android:toDegrees="float" android:pivotX="float" android:pivotY="float" /> <set> ... </set> </set></pre> <pre> ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage); Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump); spaceshipImage.startAnimation(hyperspaceJumpAnimation);</pre> <p>上面就是一个标准的使用我们定义的补间动画的模板。至于补间动画的使用，Animation还有如下一些比较实用的方法介绍：</p> <table> <thead> <tr> <th>Animation类的方法</th> <th>解释</th> </tr> </thead> <tbody> <tr> <td>reset()</td> <td>重置Animation的初始化</td> </tr> <tr> <td>cancel()</td> <td>取消Animation动画</td> </tr> <tr> <td>start()</td> <td>开始Animation动画</td> </tr> <tr> <td>setAnimationListener(AnimationListener listener)</td> <td>给当前Animation设置动画监听</td> </tr> <tr> <td>hasStarted()</td> <td>判断当前Animation是否开始</td> </tr> <tr> <td>hasEnded()</td> <td>判断当前Animation是否结束</td> </tr> </tbody> </table> <p><br> 既然补间动画只能给View使用，那就来看看View中和动画相关的几个常用方法吧，如下：</p> <table> <thead> <tr> <th>View类的常用动画操作方法</th> <th>解释</th> </tr> </thead> <tbody> <tr> <td>startAnimation(Animation animation)</td> <td>对当前View开始设置的Animation动画</td> </tr> <tr> <td>clearAnimation()</td> <td>取消当View在执行的Animation动画</td> </tr> </tbody> </table> <p>到此整个Android的补间动画常用详细属性及方法全部介绍完毕，如有特殊的属性需求可以访问Android Developer查阅即可。如下我们就来个综合大演练。</p> <h3><strong>2-4 视图动画注意事项</strong></h3> <p>关于视图动画（补间动画）的例子我就不介绍了，网上简直多的都泛滥了。只是强调在使用补间动画时注意如下一点即可：</p> <p><strong><em>特别特别注意：补间动画执行之后并未改变View的真实布局属性值。切记这一点，譬如我们在Activity中有一个Button在屏幕上方，我们设置了平移动画移动到屏幕下方然后保持动画最后执行状态呆在屏幕下方，这时如果点击屏幕下方动画执行之后的Button是没有任何反应的，而点击原来屏幕上方没有Button的地方却响应的是点击Button的事件。</em></strong></p> <h3><strong>2-5 视图动画Interpolator插值器详解</strong></h3> <p><strong>2-5-1 插值器简介</strong></p> <p>介绍补间动画插值器之前我们先来看一幅图，如下：</p> <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/41bf81d0daba9a2fe4dfb5d5bc5ab130.png"></p> <p>可以看见其实各种插值器都是实现了Interpolator接口而已，同时可以看见系统提供了许多已经实现OK的插值器，具体如下：</p> <table> <thead> <tr> <th>java类</th> <th>xml id值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>AccelerateDecelerateInterpolator</td> <td>@android:anim/accelerate_decelerate_interpolator</td> <td>动画始末速率较慢，中间加速</td> </tr> <tr> <td>AccelerateInterpolator</td> <td>@android:anim/accelerate_interpolator</td> <td>动画开始速率较慢，之后慢慢加速</td> </tr> <tr> <td>AnticipateInterpolator</td> <td>@android:anim/anticipate_interpolator</td> <td>开始的时候从后向前甩</td> </tr> <tr> <td>AnticipateOvershootInterpolator</td> <td>@android:anim/anticipate_overshoot_interpolator</td> <td>类似上面AnticipateInterpolator</td> </tr> <tr> <td>BounceInterpolator</td> <td>@android:anim/bounce_interpolator</td> <td>动画结束时弹起</td> </tr> <tr> <td>CycleInterpolator</td> <td>@android:anim/cycle_interpolator</td> <td>循环播放速率改变为正弦曲线</td> </tr> <tr> <td>DecelerateInterpolator</td> <td>@android:anim/decelerate_interpolator</td> <td>动画开始快然后慢</td> </tr> <tr> <td>LinearInterpolator</td> <td>@android:anim/linear_interpolator</td> <td>动画匀速改变</td> </tr> <tr> <td>OvershootInterpolator</td> <td>@android:anim/overshoot_interpolator</td> <td>向前弹出一定值之后回到原来位置</td> </tr> <tr> <td>PathInterpolator</td> <td> </td> <td>新增，定义路径坐标后按照路径坐标来跑。</td> </tr> </tbody> </table> <p>如上就是系统提供的一些插值器，下面我们来看看怎么使用他们。</p> <p><strong>2-5-2 插值器使用方法</strong></p> <p>插值器的使用比较简答，如下：</p> <pre> <set android:interpolator="@android:anim/accelerate_interpolator"> ... </set></pre> <p><strong>2-5-3 插值器的自定义</strong></p> <p>有时候你会发现系统提供的插值器不够用，可能就像View一样需要自定义。所以接下来我们来看看插值器的自定义，关于插值器的自定义分为两种实现方式，xml自定义实现（其实就是对现有的插值器的一些属性修改）或者java代码实现方式。如下我们来说说。</p> <p>先看看XML自定义插值器的步骤：</p> <ul> <li>在res/anim/目录下创建filename.xml文件。</li> <li>修改你准备自定义的插值器如下：</li> </ul> <pre> <?xml version="1.0" encoding="utf-8"?> <InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android" android:attribute_name="value" /></pre> <ul> <li>在你的补间动画文件中引用该文件即可。</li> </ul> <p>可以看见上面第二步修改的是现有插值器的一些属性，但是有些插值器却不具备修改属性，具体如下：</p> <p><strong><code><accelerateDecelerateInterpolator></code></strong></p> <p>无可自定义的attribute。</p> <p><strong><code><accelerateInterpolator></code></strong></p> <p>android:factor 浮点值，加速速率（默认值为1）。</p> <p><strong><code><anticipateInterploator></code></strong></p> <p>android:tension 浮点值，起始点后拉的张力数（默认值为2）。</p> <p><strong><code><anticipateOvershootInterpolator></code></strong></p> <p>android:tension 浮点值，起始点后拉的张力数（默认值为2）。<br> android:extraTension 浮点值，拉力的倍数（默认值为1.5）。</p> <p><strong><code><bounceInterpolator></code></strong></p> <p>无可自定义的attribute。</p> <p><strong><code><cycleInterplolator></code></strong></p> <p>android:cycles 整形，循环的个数（默认为1）。</p> <p><strong><code><decelerateInterpolator></code></strong></p> <p>android:factor 浮点值，减速的速率（默认为1）。</p> <p><strong><code><linearInterpolator></code></strong></p> <p>无可自定义的attribute。</p> <p><strong><code><overshootInterpolator></code></strong></p> <p>android:tension 浮点值，超出终点后的张力（默认为2）。</p> <p>再来看看Java自定义插值器的（Java自定义插值器其实是xml自定义的升级，也就是说如果我们修改xml的属性还不能满足需求，那就可以选择通过Java来实现）方式。</p> <p>可以看见上面所有的Interpolator都实现了Interpolator接口，而Interpolator接口又继承自TimeInterpolator，TimeInterpolator接口定义了一个float getInterpolation(float input);方法，这个方法是由系统调用的，其中的参数input代表动画的时间，在0和1之间，也就是开始和结束之间。</p> <p>如下就是一个动画始末速率较慢、中间加速的AccelerateDecelerateInterpolator插值器：</p> <pre> public class AccelerateDecelerateInterpolator extends BaseInterpolator implements NativeInterpolatorFactory { ...... public float getInterpolation(float input) { return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f; } ...... }</pre> <p>到此整个补间动画与补间动画的插值器都分析完毕了，接下来看下别的动画。</p> <h2><strong>3 Drawable Animation（Drawable动画）使用详解</strong></h2> <h3><strong>3-1 Drawable动画概述</strong></h3> <p>Drawable动画其实就是Frame动画（帧动画），它允许你实现像播放幻灯片一样的效果，这种动画的实质其实是Drawable，所以这种动画的XML定义方式文件一般放在res/drawable/目录下。具体关于帧动画的xml使用方式<a href="/misc/goto?guid=4959675125078394722">KX上网点击我</a>查看，java方式<a href="/misc/goto?guid=4959675125160981155">KX上网点击我</a>查看。</p> <p>如下图就是帧动画的源码文件：</p> <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/dc2fb9a70911004e23f7bf42604371fc.png"></p> <p>可以看见实际的真实父类就是Drawable。</p> <h3><strong>3-2 Drawable动画详细说明</strong></h3> <p>我们依旧可以使用xml或者java方式实现帧动画。但是依旧推荐使用xml，具体如下：</p> <p><strong><code><animation-list></code></strong> 必须是根节点，包含一个或者多个<code><item></code>元素，属性有：</p> <ul> <li><strong>android:oneshot</strong> true代表只执行一次，false循环执行。</li> <li><strong><code><item></code></strong> 类似一帧的动画资源。</li> </ul> <p><strong><code><item></code></strong> animation-list的子项，包含属性如下：</p> <ul> <li><strong>android:drawable</strong> 一个frame的Drawable资源。</li> <li><strong>android:duration</strong> 一个frame显示多长时间。</li> </ul> <h3><strong>3-3 Drawable动画实例演示</strong></h3> <p>关于帧动画相对来说比较简单，这里给出一个常规使用框架，如下：</p> <pre> <!-- 注意：rocket.xml文件位于res/drawable/目录下 --> <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot=["true" | "false"] > <item android:drawable="@[package:]drawable/drawable_resource_name" android:duration="integer" /> </animation-list></pre> <pre> ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image); rocketImage.setBackgroundResource(R.drawable.rocket_thrust); rocketAnimation = (AnimationDrawable) rocketImage.getBackground(); rocketAnimation.start();</pre> <p><strong><em>特别注意，AnimationDrawable的start()方法不能在Activity的onCreate方法中调运，因为AnimationDrawable还未完全附着到window上，所以最好的调运时机是onWindowFocusChanged()方法中。</em></strong></p> <p>至此帧动画也就说明完成了。让我们接下来进入Android更牛叉的动画类型。</p> <h2><strong>4 Property Animation（属性动画）使用详解</strong></h2> <p>在使用属性动画之前先来看几个常用的View属性成员：</p> <ul> <li>translationX，translationY：控制View的位置，值是相对于View容器左上角坐标的偏移。</li> <li>rotationX，rotationY：控制相对于轴心旋转。</li> <li>x，y：控制View在容器中的位置，即左上角坐标加上translationX和translationY的值。</li> <li>alpha：控制View对象的alpha透明度值。</li> </ul> <p>这几个常用的属性相信大家都很熟悉，接下来的属性动画我们就从这里展开。</p> <h3><strong>4-1 属性动画概述</strong></h3> <p>Android 3.0以后引入了属性动画，属性动画可以轻而易举的实现许多View动画做不到的事，上面也看见了，View动画无非也就做那几种事情，别的也搞不定，而属性动画就可以的，譬如3D旋转一张图片。其实说白了，你记住一点就行，属性动画实现原理就是修改控件的属性值实现的动画。</p> <p>具体先看下类关系：</p> <pre> /** * This is the superclass for classes which provide basic support for animations which can be * started, ended, and have <code>AnimatorListeners</code> added to them. */ public abstract class Animator implements Cloneable { ...... }</pre> <p>所有的属性动画的抽象基类就是他。我们看下他的实现子类：<br> <img alt="这里写图片描述" src="https://simg.open-open.com/show/ced532ea8cceb458c3d912240d8420e6.png"><br> 其实可以看见，属性动画的实现有7个类（PS，之所以类继承关系列表会出来那么多是因为我下载了所有版本的SDK，你只用关注我红点标注的就行，妹的，ubuntu下图片处理工具怎么都这么难用），进去粗略分析可以发现，好几个是hide的类，而其他可用的类继承关系又如下：</p> <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/7bf0274f9c0e4fabf7095c645f841076.png"></p> <table> <thead> <tr> <th>java类名</th> <th>xml关键字</th> <th>描述信息</th> </tr> </thead> <tbody> <tr> <td>ValueAnimator</td> <td><code><animator></code> 放置在res/animator/目录下</td> <td>在一个特定的时间里执行一个动画</td> </tr> <tr> <td>TimeAnimator</td> <td>不支持<a href="/misc/goto?guid=4959675125239325899">/点我查看原因</a></td> <td>时序监听回调工具</td> </tr> <tr> <td>ObjectAnimator</td> <td><code><objectAnimator></code> 放置在res/animator/目录下</td> <td>一个对象的一个属性动画</td> </tr> <tr> <td>AnimatorSet</td> <td><code><set></code> 放置在res/animator/目录下</td> <td>动画集合</td> </tr> </tbody> </table> <p>所以可以看见，我们平时使用属性动画的重点就在于AnimatorSet、ObjectAnimator、TimeAnimator、ValueAnimator。所以接下来我们就来依次说说如何使用。</p> <h3><strong>4-2 属性动画详细说明</strong></h3> <p><strong>4-2-1 属性动画计算原理</strong></p> <p><a href="/misc/goto?guid=4959617425892076057">参看Android官方文档，英文原版详情点我查看！</a></p> <p>Android属性动画（注意最低兼容版本，不过可以使用开源项目来替代低版本问题）提供了以下属性：</p> <ul> <li>Duration：动画的持续时间；</li> <li>TimeInterpolation：定义动画变化速率的接口，所有插值器都必须实现此接口，如线性、非线性插值器；</li> <li>TypeEvaluator：用于定义属性值计算方式的接口，有int、float、color类型，根据属性的起始、结束值和插值一起计算出当前时间的属性值；</li> <li>Animation sets：动画集合，即可以同时对一个对象应用多个动画，这些动画可以同时播放也可以对不同动画设置不同的延迟；</li> <li>Frame refreash delay：多少时间刷新一次，即每隔多少时间计算一次属性值，默认为10ms，最终刷新时间还受系统进程调度与硬件的影响；</li> <li>Repeat Country and behavoir：重复次数与方式，如播放3次、5次、无限循环，可以让此动画一直重复，或播放完时向反向播放；</li> </ul> <p>接下来先来看官方为了解释原理给出的两幅图（其实就是初中物理题，不解释）：</p> <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/6fe3079307b703ec9d768483f4ccffd2.png"><br> 上面就是一个线性匀速动画，描述了一个Object的X属性运动动画，该对象的X坐标在40ms内从0移动到40，每10ms刷新一次，移动4次，每次移动为40/4=10pixel。<br> <img alt="这里写图片描述" src="https://simg.open-open.com/show/a4b5ea8851ef3ee6fd795eff78546ff6.png"><br> 上面是一个非匀速动画，描述了一个Object的X属性运动动画，该对象的X坐标在40ms内从0移动到40，每10ms刷新一次，移动4次，但是速率不同，开始和结束的速度要比中间部分慢，即先加速后减速。</p> <p>接下来我们来详细的看一下，属性动画系统的重要组成部分是如何计算动画值的，下图描述了如上面所示动画的实现作用过程。</p> <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/ffec6dfdaa2dee154340ebcb2517984e.png"></p> <p>其中的ValueAnimator是动画的执行类，跟踪了当前动画的执行时间和当前时间下的属性值；ValueAnimator封装了动画的TimeInterpolator时间插值器和一个TypeEvaluator类型估值，用于设置动画属性的值，就像上面图2非线性动画里，TimeInterpolator使用了AccelerateDecelerateInterpolator、TypeEvaluator使用了IntEvaluator。</p> <p>为了执行一个动画，你需要创建一个ValueAnimator，并且指定目标对象属性的开始、结束值和持续时间。在调用start后，整个动画过程中， ValueAnimator会根据已经完成的动画时间计算得到一个0到1之间的分数，代表该动画的已完成动画百分比。0表示0%，1表示100%，譬如上面图一线性匀速动画中总时间 t = 40 ms，t = 10 ms的时候是 0.25。</p> <p>当ValueAnimator计算完已完成动画分数后，它会调用当前设置的TimeInterpolator，去计算得到一个interpolated（插值）分数，在计算过程中，已完成动画百分比会被加入到新的插值计算中。如上图2非线性动画中，因为动画的运动是缓慢加速的，它的插值分数大约是 0.15，小于t = 10ms时的已完成动画分数0.25。而在上图1中，这个插值分数一直和已完成动画分数是相同的。</p> <p>当插值分数计算完成后，ValueAnimator会根据插值分数调用合适的 TypeEvaluator去计算运动中的属性值。</p> <p>好了，现在我们来看下代码就明白这段话了，上面图2非线性动画里，TimeInterpolator使用了AccelerateDecelerateInterpolator、TypeEvaluator使用了IntEvaluator。所以这些类都是标准的API，我们来看下标准API就能类比自己写了，如下：</p> <p>首先计算已完成动画时间分数（以10ms为例）：t=10ms/40ms=0.25。</p> <p>接着看如下源码如何实现计算差值分数的：</p> <pre> public class AccelerateDecelerateInterpolator extends BaseInterpolator implements NativeInterpolatorFactory { public AccelerateDecelerateInterpolator() { } ...... //这是我们关注重点，可以发现如下计算公式计算后（input即为时间因子）插值大约为0.15。 public float getInterpolation(float input) { return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f; } ...... }</pre> <p>其实AccelerateDecelerateInterpolator的基类接口就是TimeInterpolator，如下，他只有getInterpolation方法，也就是上面我们关注的方法。</p> <pre> public interface TimeInterpolator { float getInterpolation(float input); }</pre> <p>接着ValueAnimator会根据插值分数调用合适的TypeEvaluator（IntEvaluator）去计算运动中的属性值，如下，因为startValue = 0，所以属性值：0+0.15*（40-0）= 6。</p> <pre> public class IntEvaluator implements TypeEvaluator<Integer> { public Integer evaluate(float fraction, Integer startValue, Integer endValue) { int startInt = startValue; return (int)(startInt + fraction * (endValue - startInt)); } }</pre> <p>这就是官方给的一个关于属性动画实现的过程及基本原理解释，相信你看到这里是会有些迷糊的，没关系，你先有个大致概念就行，接下来我们会慢慢进入实战，因为Android的属性动画相对于其他动画来说涉及的知识点本来就比较复杂，所以我们慢慢来。</p> <p><strong>4-2-2 XML方式属性动画</strong></p> <p>在xml中可直接用的属性动画节点有ValueAnimator、ObjectAnimator、AnimatorSet。如下是官方的一个例子和解释（<a href="/misc/goto?guid=4959675125239325899">详情点我</a>）：</p> <pre> <set android:ordering=["together" | "sequentially"]> <objectAnimator android:propertyName="string" android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["repeat" | "reverse"] android:valueType=["intType" | "floatType"]/> <animator android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["repeat" | "reverse"] android:valueType=["intType" | "floatType"]/> <set> ... </set> </set></pre> <p><strong><code><set></code>属性解释：</strong></p> <table> <thead> <tr> <th>xml属性</th> <th>解释</th> </tr> </thead> <tbody> <tr> <td>android:ordering</td> <td>控制子动画启动方式是先后有序的还是同时进行。sequentially:动画按照先后顺序；together(默认):动画同时启动；</td> </tr> </tbody> </table> <p><br> <strong><code><objectAnimator></code>属性解释：</strong></p> <table> <thead> <tr> <th>xml属性</th> <th>解释</th> </tr> </thead> <tbody> <tr> <td>android:propertyName</td> <td>String类型，必须要设置的节点属性，代表要执行动画的属性（通过名字引用），辟如你可以指定了一个View的”alpha” 或者 “backgroundColor” ，这个objectAnimator元素没有对外说明target属性，所以你不能在XML中设置执行这个动画，必须通过调用loadAnimator()方法加载你的XML动画资源，然后调用setTarget()应用到具备这个属性的目标对象上（譬如TextView）。</td> </tr> <tr> <td>android:valueTo</td> <td>float、int或者color类型，必须要设置的节点属性，表明动画结束的点；如果是颜色的话，由6位十六进制的数字表示。</td> </tr> <tr> <td>android:valueFrom</td> <td>相对应valueTo，动画的起始点，如果没有指定，系统会通过属性的get方法获取，颜色也是6位十六进制的数字表示。</td> </tr> <tr> <td>android:duration</td> <td>动画的时长，int类型，以毫秒为单位，默认为300毫秒。</td> </tr> <tr> <td>android:startOffset</td> <td>动画延迟的时间，从调用start方法后开始计算，int型，毫秒为单位。</td> </tr> <tr> <td>android:repeatCount</td> <td>一个动画的重复次数，int型，”-1“表示无限循环，”1“表示动画在第一次执行完成后重复执行一次，也就是两次，默认为0，不重复执行。</td> </tr> <tr> <td>android:repeatMode</td> <td>重复模式：int型，当一个动画执行完的时候应该如何处理。该值必须是正数或者是-1，“reverse”会使得按照动画向相反的方向执行，可实现类似钟摆效果。“repeat”会使得动画每次都从头开始循环。</td> </tr> <tr> <td>android:valueType</td> <td>关键参数，如果该value是一个颜色，那么就不需要指定，因为动画框架会自动的处理颜色值。有intType和floatType（默认）两种：分别说明动画值为int和float型。</td> </tr> </tbody> </table> <p><br> <strong><code><objectAnimator></code>属性解释：</strong><br> 同上<code><objectAnimator></code>属性，不多介绍。</p> <p><strong>XML属性动画使用方法：</strong></p> <pre> AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext, R.animtor.property_animator); set.setTarget(myObject); set.start();</pre> <p><strong>4-2-3 Java方式属性动画</strong></p> <p>1、<strong>ObjectAnimator：</strong>继承自ValueAnimator，允许你指定要进行动画的对象以及该对象的一个属性。该类会根据计算得到的新值自动更新属性。大多数的情况使用ObjectAnimator就足够了，因为它使得目标对象动画值的处理过程变得足够简单，不用像ValueAnimator那样自己写动画更新的逻辑，但是ObjectAnimator有一定的限制，比如它需要目标对象的属性提供指定的处理方法（譬如提供getXXX，setXXX方法），这时候你就需要根据自己的需求在ObjectAnimator和ValueAnimator中看哪种实现更方便了。</p> <pre> ObjectAnimator类提供了ofInt、ofFloat、ofObject这个三个常用的方法，这些方法都是设置动画作用的元素、属性、开始、结束等任意属性值。当属性值（上面方法的参数）只设置一个时就把通过getXXX反射获取的值作为起点，设置的值作为终点；如果设置两个（参数），那么一个是开始、另一个是结束。 特别注意：ObjectAnimator的动画原理是不停的调用setXXX方法更新属性值，所有使用ObjectAnimator更新属性时的前提是Object必须声明有getXXX和setXXX方法。 </pre> <p>我们通常使用ObjectAnimator设置View已知的属性来生成动画，而一般View已知属性变化时都会主动触发重绘图操作，所以动画会自动实现；但是也有特殊情况，譬如作用Object不是View，或者作用的属性没有触发重绘，或者我们在重绘时需要做自己的操作，那都可以通过如下方法手动设置：</p> <pre> ObjectAnimator mObjectAnimator= ObjectAnimator.ofInt(view, "customerDefineAnyThingName", 0, 1).setDuration(2000); mObjectAnimator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { //int value = animation.getAnimatedValue(); 可以获取当前属性值 //view.postInvalidate(); 可以主动刷新 //view.setXXX(value); //view.setXXX(value); //......可以批量修改属性 } });</pre> <p>如下是一个我在项目中的Y轴3D旋转动画实现实例：</p> <pre> ObjectAnimator.ofFloat(view, "rotationY", 0.0f, 360.0f).setDuration(1000).start();</pre> <p>2、<strong>PropertyValuesHolder：</strong>多属性动画同时工作管理类。有时候我们需要同时修改多个属性，那就可以用到此类，具体如下：</p> <pre> PropertyValuesHolder a1 = PropertyValuesHolder.ofFloat("alpha", 0f, 1f); PropertyValuesHolder a2 = PropertyValuesHolder.ofFloat("translationY", 0, viewWidth); ...... ObjectAnimator.ofPropertyValuesHolder(view, a1, a2, ......).setDuration(1000).start();</pre> <p>如上代码就可以实现同时修改多个属性的动画啦。</p> <p>3、<strong>ValueAnimator：</strong>属性动画中的时间驱动，管理着动画时间的开始、结束属性值，相应时间属性值计算方法等。包含所有计算动画值的核心函数以及每一个动画时间节点上的信息、一个动画是否重复、是否监听更新事件等，并且还可以设置自定义的计算类型。</p> <pre> 特别注意：ValueAnimator只是动画计算管理驱动，设置了作用目标，但没有设置属性，需要通过updateListener里设置属性才会生效。 </pre> <pre> ValueAnimator animator = ValueAnimator.ofFloat(0, mContentHeight); //定义动画 animator.setTarget(view); //设置作用目标 animator.setDuration(5000).start(); animator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation){ float value = (float) animation.getAnimatedValue(); view.setXXX(value); //必须通过这里设置属性值才有效 view.mXXX = value; //不需要setXXX属性方法 } });</pre> <p>大眼看上去可以发现和ObjectAnimator没啥区别，实际上正是由于ValueAnimator不直接操作属性值，所以要操作对象的属性可以不需要setXXX与getXXX方法，你完全可以通过当前动画的计算去修改任何属性。</p> <p>4、<strong>AnimationSet：</strong>动画集合，提供把多个动画组合成一个组合的机制，并可设置动画的时序关系，如同时播放、顺序播放或延迟播放。具体使用方法比较简单，如下：</p> <pre> ObjectAnimator a1 = ObjectAnimator.ofFloat(view, "alpha", 1.0f, 0f); ObjectAnimator a2 = ObjectAnimator.ofFloat(view, "translationY", 0f, viewWidth); ...... AnimatorSet animSet = new AnimatorSet(); animSet.setDuration(5000); animSet.setInterpolator(new LinearInterpolator()); //animSet.playTogether(a1, a2, ...); //两个动画同时执行 animSet.play(a1).after(a2); //先后执行 ......//其他组合方式 animSet.start(); </pre> <p>5、<strong>Evaluators相关类解释：</strong> Evaluators就是属性动画系统如何去计算一个属性值。它们通过Animator提供的动画的起始和结束值去计算一个动画的属性值。</p> <ul> <li> <p><strong>IntEvaluator：</strong>整数属性值。</p> </li> <li> <p><strong>FloatEvaluator：</strong>浮点数属性值。</p> </li> <li> <p><strong>ArgbEvaluator：</strong>十六进制color属性值。</p> </li> <li> <p><strong>TypeEvaluator：</strong>用户自定义属性值接口，譬如对象属性值类型不是int、float、color类型，你必须实现这个接口去定义自己的数据类型。</p> </li> </ul> <p>既然说到这了，那就来个例子吧，譬如我们需要实现一个自定义属性类型和计算规则的属性动画，如下类型float[]：</p> <pre> ValueAnimator valueAnimator = new ValueAnimator(); valueAnimator.setDuration(5000); valueAnimator.setObjectValues(new float[2]); //设置属性值类型 valueAnimator.setInterpolator(new LinearInterpolator()); valueAnimator.setEvaluator(new TypeEvaluator<float[]>() { @Override public float[] evaluate(float fraction, float[] startValue, float[] endValue) { //实现自定义规则计算的float[]类型的属性值 float[] temp = new float[2]; temp[0] = fraction * 2; temp[1] = (float)Math.random() * 10 * fraction; return temp; } }); valueAnimator.start(); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float[] xyPos = (float[]) animation.getAnimatedValue(); view.setHeight(xyPos[0]); //通过属性值设置View属性动画 view.setWidth(xyPos[1]); //通过属性值设置View属性动画 } });</pre> <p>6、<strong>Interpolators相关类解释：</strong></p> <ul> <li> <p><strong>AccelerateDecelerateInterolator：</strong>先加速后减速。</p> </li> <li> <p><strong>AccelerateInterpolator：</strong>加速。</p> </li> <li> <p><strong>DecelerateInterpolator：</strong>减速。</p> </li> <li> <p><strong>AnticipateInterpolator：</strong>先向相反方向改变一段再加速播放。</p> </li> <li> <p><strong>AnticipateOvershootInterpolator：</strong>先向相反方向改变，再加速播放，会超出目标值然后缓慢移动至目标值，类似于弹簧回弹。</p> </li> <li> <p><strong>BounceInterpolator：</strong>快到目标值时值会跳跃。</p> </li> <li> <p><strong>CycleIinterpolator：</strong>动画循环一定次数，值的改变为一正弦函数：Math.sin(2 * mCycles * Math.PI * input)。</p> </li> <li> <p><strong>LinearInterpolator：</strong>线性均匀改变。</p> </li> <li> <p><strong>OvershottInterpolator：</strong>最后超出目标值然后缓慢改变到目标值。</p> </li> <li> <p><strong>TimeInterpolator：</strong>一个允许自定义Interpolator的接口，以上都实现了该接口。</p> </li> </ul> <p>举个例子，就像系统提供的标准API一样，如下就是加速插值器的实现代码，我们自定义时也可以类似实现：</p> <pre> //开始很慢然后不断加速的插值器。 public class AccelerateInterpolator implements Interpolator { private final float mFactor; private final double mDoubleFactor; public AccelerateInterpolator() { mFactor = 1.0f; mDoubleFactor = 2.0; } ...... //input 0到1.0。表示动画当前点的值，0表示开头，1表示结尾。 //return 插值。值可以大于1超出目标值，也可以小于0突破低值。 @Override public float getInterpolation(float input) { //实现核心代码块 if (mFactor == 1.0f) { return input * input; } else { return (float)Math.pow(input, mDoubleFactor); } } }</pre> <p>综上可以发现，我们可以使用现有系统提供标准的东东实现属性动画，也可以通过自定义继承相关接口实现自己的动画，只要实现上面提到的那些主要方法即可。</p> <p><strong>4-2-4 Java属性动画拓展之ViewPropertyAnimator动画</strong></p> <p>在Android API 12时，View中添加了animate方法，具体如下：</p> <pre> public class View implements Drawable.Callback, KeyEvent.Callback, AccessibilityEventSource { ...... /** * This method returns a ViewPropertyAnimator object, which can be used to animate * specific properties on this View. * * @return ViewPropertyAnimator The ViewPropertyAnimator associated with this View. */ public ViewPropertyAnimator animate() { if (mAnimator == null) { mAnimator = new ViewPropertyAnimator(this); } return mAnimator; } ...... }</pre> <p>可以看见通过View的animate()方法可以得到一个ViewPropertyAnimator的属性动画（有人说他没有继承Animator类，是的，他是成员关系，不是之前那种继承关系）。</p> <p>ViewPropertyAnimator提供了一种非常方便的方法为View的部分属性设置动画（切记，是部分属性），它可以直接使用一个Animator对象设置多个属性的动画；在多属性设置动画时，它比 上面的ObjectAnimator更加牛逼、高效，因为他会管理多个属性的invalidate方法统一调运触发，而不像上面分别调用，所以还会有一些性能优化。如下就是一个例子：</p> <pre> myView.animate().x(0f).y(100f).start(); </pre> <p><strong>4-2-5 Java属性动画拓展之LayoutAnimator容器布局动画</strong></p> <p>Property动画系统还提供了对ViewGroup中View添加时的动画功能，我们可以用LayoutTransition对ViewGroup中的View进行动画设置显示。LayoutTransition的动画效果都是设置给ViewGroup，然后当被设置动画的ViewGroup中添加删除View时体现出来。该类用于当前布局容器中有View添加、删除、隐藏、显示等时候定义布局容器自身的动画和View的动画，也就是说当在一个LinerLayout中隐藏一个View的时候，我们可以自定义 整个由于LinerLayout隐藏View而改变的动画，同时还可以自定义被隐藏的View自己消失时候的动画等。</p> <p>我们可以发现LayoutTransition类中主要有五种容器转换动画类型，具体如下：</p> <ul> <li> <p>LayoutTransition.APPEARING：当View出现或者添加的时候View出现的动画。</p> </li> <li> <p>LayoutTransition.CHANGE_APPEARING：当添加View导致布局容器改变的时候整个布局容器的动画。</p> </li> <li> <p>LayoutTransition.DISAPPEARING：当View消失或者隐藏的时候View消失的动画。</p> </li> <li> <p>LayoutTransition.CHANGE_DISAPPEARING：当删除或者隐藏View导致布局容器改变的时候整个布局容器的动画。</p> </li> <li> <p>LayoutTransition.CHANGE：当不是由于View出现或消失造成对其他View位置造成改变的时候整个布局容器的动画。</p> </li> </ul> <p><strong>XML方式使用系统提供的默认LayoutTransition动画：</strong></p> <p>我们可以通过如下方式使用系统提供的默认ViewGroup的LayoutTransition动画：</p> <pre> android:animateLayoutChanges=”true”</pre> <p>在ViewGroup添加如上xml属性默认是没有任何动画效果的，因为前面说了，该动画针对于ViewGroup内部东东发生改变时才有效，所以当我们设置如上属性然后调运ViewGroup的addView、removeView方法时就能看见系统默认的动画效果了。</p> <p>还有一种就是通过如下方式设置：</p> <pre> android:layoutAnimation=”@anim/customer_anim”</pre> <p>通过这种方式就能实现很多吊炸天的动画。</p> <p><strong>Java方式使用系统提供的默认LayoutTransition动画：</strong></p> <p>在使用LayoutTransition时，你可以自定义这几种事件类型的动画，也可以使用默认的动画，总之最终都是通过setLayoutTransition(LayoutTransition lt)方法把这些动画以一个LayoutTransition对象设置给一个ViewGroup。</p> <p>譬如实现如上Xml方式的默认系统LayoutTransition动画如下：</p> <pre> mTransitioner = new LayoutTransition(); mViewGroup.setLayoutTransition(mTransitioner);</pre> <p>稍微再高端一点吧，我们来自定义这几类事件的动画，分别实现他们，那么你可以像下面这么处理：</p> <pre> mTransitioner = new LayoutTransition(); ...... ObjectAnimator anim = ObjectAnimator.ofFloat(this, "scaleX", 0, 1); ......//设置更多动画 mTransition.setAnimator(LayoutTransition.APPEARING, anim); ......//设置更多类型的动画 mViewGroup.setLayoutTransition(mTransitioner);</pre> <p>到此通过LayoutTransition你就能实现类似小米手机计算器切换普通型和科学型的炫酷动画了。</p> <h2><strong>5 Android动画总结</strong></h2> <p>到此Android动画基本已经描述OK了，也就这么三大类，尤其是属性动画更加一筹。但是特别说一句，上面基本都没有提及到各种动画的Listener接口，原因是这个玩意太简单，所以不提了，相信你会监听View的onClickListener就一定会触类旁通动画的Listener方法的。有了这些基础相信无论是自定义控件时还是自定义动画时都会起到直接的指导参考作用。其实对于Android的动画实现远远不止现在提到的这些，但是这些又是基础，所以后面还会写文章说说Android提供的其他动画参考工具类的。</p> <p>现在我们继续沿用官方的对比，翻译一下这些动画的区别，具体如下（<a href="/misc/goto?guid=4959675125355388676">点我参看原文How Property Animation Differs from View Animation</a>）：</p> <p><strong>View动画：</strong></p> <p>View动画只能够为View添加动画，如果想为非View对象添加动画须自己实现；且View动画支持的种类很少；<em>尤其是他改变的是View的绘制效果，View的属性没有改变，其位置与大小都不变；</em> View动画代码量少，使用简单方便。</p> <p><strong>Property动画：</strong></p> <p>弥补了View动画的缺陷，你可以为一个对象的任意属性添加动画，对象自己的属性会被真的改变；当对象的属性变化的时候，属性动画会自动刷新屏幕；属性动画改变的是对象的真实属性，而且属性动画不止用于View，还可以用于任何对象。</p> <p>好了，太不容易了！这一篇文章差点难产了，断断续续各种事，终于追求完美OK了，接下来博客恢复正常更新。</p> <p> </p> <p><a href="/misc/goto?guid=4958964898441788138">阅读原文</a></p> <p> </p>