帧动画和补间动画

arthur_8 4年前
   <p><strong>写在前面:</strong></p>    <p>为了使用户的交互更加流畅自然,动画也就成为了一个应用中必不可少的元素之一。在 Android 中常用的动画分类无外乎三种,最早的 <strong>帧动画</strong> 、 <strong>补间动画</strong> ,以及 3.0 之后加入的 <strong>属性动画</strong> ,是它们组成了 Android 中各种炫酷亮眼的动画效果。</p>    <p>关于动画相关的博文说实话很多,但是为什么要写这篇文章呢?因为我发现很多博客都上来就“翻译”了一通 <strong>API</strong> ,这对很多没有建立起 Android 动画体系概念的新人来说,非常不友好。既没有说明各种动画的应用场景,也没有横向对比动画的优缺点。对于刚学习动画的同学来说,他们读起来心里就更没底了,面对稍微复杂的动画就无从下手,就好比那句歌词“懂得很多道理,却仍过不好这一生”。所以本文要有更多思考分析之外,也会教大家一些关于动画的小技巧和可能踩到的坑。本文我们就先来研究 帧动画 和 补间动画,话不多说,现在开始我们的内容吧。</p>    <h2><strong>帧动画</strong></h2>    <p>我们由简到难,先来讲讲帧动画。帧动画就是 Frame 动画,它的原理十分“复古”,和我们小时候看的动画片原理一致(注意是我们小时候),就是把一张张准备好的,一系列图片,按照指定的时间播放出来,从而达到动画的效果。</p>    <p>如此简单而又看似过时的帧动画,是否就被淘汰了呢?答案的自然是否定的。帧动画依然在这个复杂而有机的 Android 系统中占有一席之地。先来告诉大家帧动画的使用场景吧。</p>    <ul>     <li> <p>设备的开机动画</p> </li>     <li> <p>及其“复杂”的效果,看似不可能完成的动画</p> </li>    </ul>    <p>设备的开机动画界面这个没什么好解释的,据我所知市面上99%的机器都是这么做的,因为这个时候系统或资源还没准备完全,所以就肯定会选择帧动画。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c039a66ace702046a5bc6d9971f57736.png"></p>    <p>我在我以前的魅族手机 /system/media 文件夹下,找到了一系列以上这种图片,组合到一起就是开机动画了。</p>    <p>你可能还对我上面所说的第二种使用场景表示怀疑,前几天我看到一个应用有一个非常酷炫的效果,3D特效旋转的画面,请脑补一下数码宝贝进化的样子,我刚开始还纳闷,这个用代码怎么实现啊,想了下我想通了,这个用帧动画其实最好实现了,难为的可能就是设计师了( 那可就不关能怪我推责任了哦~)。</p>    <p>介绍完了应用场景,那现在就应该来介绍到底如何在代码中使用了。</p>    <p>准备一个帧动画的图片资源:</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/94f642350354f71a36588ec78d7f2af4.png"></p>    <p>可以通过 代码 或者 xml 方式来使用 <strong>帧动画</strong></p>    <p><strong>XML</strong></p>    <p>新建工程,然后在 drawable 目录下新建一个 xml 文件,名字是 bear_anim ,代码如下:</p>    <pre>  <code class="language-java"><?xml version="1.0" encoding="utf-8"?>  <animation-list xmlns:android="http://schemas.android.com/apk/res/android"   android:oneshot="false">     <item   android:drawable="@drawable/sp1"   android:duration="200" />   <item   android:drawable="@drawable/sp2"   android:duration="200" />   <item   android:drawable="@drawable/sp3"   android:duration="200" />   <item   android:drawable="@drawable/sp4"   android:duration="200" />   <item   android:drawable="@drawable/sp5"   android:duration="200" />   <item   android:drawable="@drawable/sp6"   android:duration="200" />   <item   android:drawable="@drawable/sp7"   android:duration="200" />   <item   android:drawable="@drawable/sp8"   android:duration="200" />   <item   android:drawable="@drawable/sp9"   android:duration="200" />  </animation-list>  </code></pre>    <p>需要注意的是,根节点必须为 <animation-list> , oneshot 属性代表是否循环播放一次,true 为一次,false 为循环播放。 duration 属性表示此张图片滞留的时间,然后注意从上到下依次引用图片即可。</p>    <p>接着给一个 ImageView 设置这个动画:</p>    <pre>  <code class="language-java"><ImageView   android:id="@+id/iv_frame"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:background="@drawable/bear_anim"   android:layout_centerInParent="true" />  </code></pre>    <p>最后一步当然是让动画跑起来了,需要用到 AnimationDrawable 对象:</p>    <pre>  <code class="language-java">AnimationDrawable animationDrawable = (AnimationDrawable) ivFrame.getBackground();   animationDrawable.start();  </code></pre>    <p>这样一个帧动画就展现在我们面前了,想让它停下来也很简单:</p>    <pre>  <code class="language-java">if(animationDrawable.isRunning()){   animationDrawable.stop();  }  </code></pre>    <p>自然我们也可以用纯代码的方式实现,不过在此真的不推荐,显然 xml 的方式更省力,并且维护起来更方便。</p>    <h2><strong>补间动画</strong></h2>    <p>tween 动画也叫作补间动画,它可以在一定的时间内使 View 完成四种基本的动画,即 <strong>平移、缩放、透明度、旋转</strong> ,也可以将它们组合到一起播放出来。这里先提一下未来会研究的 <strong>属性动画</strong> ,也许从上面可以观察到, 无论是 <strong>帧动画</strong> 还是 <strong>补间动画</strong> ,都是把动画效果作用到 View 上,如果一个不是 View 的元素想实现动画,那这两种就无能为力了,只能请 <strong>属性动画</strong> 帮忙了。</p>    <p>并且补间动画仅仅是给 View 增加了动画的“假象”,比如一个按钮从左侧跑到了右侧,你在右侧是无法点击它的,但是这不代表 补间动画就没有用武之地了,当你需要的动画效果无外乎上面那四种动画,并且仅仅是展示的时候,补间动画就再合适不过了。</p>    <p>同样,补间动画的实现依然可以有两种方式,xml 定义或者是纯代码的方式,这里依然是建议使用 xml 的方式。</p>    <p><strong>AlphaAnimation 透明度</strong></p>    <p>在 res 文件夹下新建文件夹 anim ,新建文件 alpha_anim:</p>    <pre>  <code class="language-java"><alpha xmlns:android="http://schemas.android.com/apk/res/android"   android:duration="200"   android:fillAfter="true"   android:fromAlpha="0"   android:interpolator="@android:anim/linear_interpolator"   android:repeatCount="-1"   android:repeatMode="reverse"   android:shareInterpolator="false"   android:toAlpha="1">    </alpha>  </code></pre>    <p>alpha 是透明度动画,分别介绍一下属性,共用属性下文不再重复介绍。</p>    <p>duration 表示这一次动画持续的时间</p>    <p>fillAfter 表示动画结束时,是否保持最后一帧的样子</p>    <p>fillBefore 表示动画结束时,是否保持第一帧的样子</p>    <p>repeatCount 表示动画循环的次数,默认为 0 次不循环,-1 为无限循环。</p>    <p>repeatMode 表示是循环的模式,reverse 是从一次动画结束开始,restart 是从动画的开始处循环</p>    <p>interpolator 是一个插值器资源,它可以控制动画的播放速度</p>    <p>shareInterpolator 表示是否与 set 中其他动画共享插值器,false为各自使用各自的插值器</p>    <p>上面共有的属性讲完了,下面来说 AlphaAnimation 特有的属性</p>    <p>fromAlpha 表示动画开始时的透明度</p>    <p>toAlpha 表示动画结束时候的透明度</p>    <p>取值为[0.0,1.0],0代表完全透明,1代表不透明。</p>    <p>代码中借助 AnimationUtils 类来加载调用</p>    <pre>  <code class="language-java">Animation alpha = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);  ivFrame.startAnimation(alpha);  </code></pre>    <p>以下的三种动画调用同理。</p>    <p>RotateAnimation 旋转动画</p>    <p>新建 xml 文件,rotate_anim</p>    <pre>  <code class="language-java"><rotate xmlns:android="http://schemas.android.com/apk/res/android"   android:duration="200"   android:fromDegrees="0"   android:pivotX="50%"   android:pivotY="50%"   android:toDegrees="360">    </rotate>  </code></pre>    <p>fromDegrees 起始角度 单位度 浮点值</p>    <p>toDegrees 结尾角度 单位度 浮点值</p>    <p>pivotX 旋转中心点的 X 坐标,这个数值有三种表达方式</p>    <p>pivotY 旋转中心丶的 Y 坐标,这个数值也有三种表达方式</p>    <ul>     <li>纯数字 例如 20 ,代表相对于自身左边缘或顶边缘 + 20 像素</li>     <li>num% 代表 相对于自身左边缘或顶边缘 + 自身宽 的百分之 num</li>     <li>num%p 代表相对于自身左边缘或顶边缘 + 父容器 的百分之 num</li>    </ul>    <p><strong>ScaleAnimation 缩放动画</strong></p>    <pre>  <code class="language-java"><scale xmlns:android="http://schemas.android.com/apk/res/android"   android:duration="2000"   android:fromXScale="0.5"   android:fromYScale="0.5"   android:pivotX="50%"   android:pivotY="50%"   android:toXScale="2.0"   android:toYScale="2.0">    </scale>  </code></pre>    <p>fromXScale<br> fromYScale</p>    <p>代表缩放时,X/Y 坐标起始大小,浮点值,0.5代表自身的一半,2.0代表自身的两倍大小。</p>    <p>toXScale<br> toYScale</p>    <p>代表缩放时,X/Y 缩放结束时候大小。</p>    <p>pivotX<br> pivotY</p>    <p>缩放的中心坐标,单位与上面 RotateAnimation 介绍的同理</p>    <p><strong>TranslateAnimation 平移动画</strong></p>    <p>新建 xml 文件 translate_anim</p>    <pre>  <code class="language-java"><translate xmlns:android="http://schemas.android.com/apk/res/android"   android:duration="200"   android:fromXDelta="0"   android:fromYDelta="0"   android:toXDelta="100%"   android:toYDelta="100%">    </translate>  </code></pre>    <p>fromXDelta<br> fromYDelta</p>    <p>起始时,X/Y 方向的位置</p>    <p>toXDelta<br> toYDelta</p>    <p>终止时,X/Y 方向的位置</p>    <p>这四个属性都支持同样的单位,依然是三种表达方式,浮点数、num% 和 num%p</p>    <ul>     <li>浮点数 位置为 View 的左边距/上边距 + 此数值 正数为右,负数为左</li>     <li>num% 位置为 View 的左边距/上边距 + View宽的百分之num 正数为右,负数为左</li>     <li>num%p 位置为 View 的左边距/上边距 + 父容器的百分之num 正数为右,负数为左</li>    </ul>    <p>如果想将几个动画组合起来使用,可以选择跟布局节点为 set</p>    <pre>  <code class="language-java"><set xmlns:android="http://schemas.android.com/apk/res/android"   android:duration="200">     <translate   android:fromXDelta="0"   android:fromYDelta="0"   android:toXDelta="100%"   android:toYDelta="100%">   </translate>     <rotate   android:fromDegrees="0"   android:pivotX="50%"   android:pivotY="50%"   android:toDegrees="360">   </rotate>    </set>  </code></pre>    <p>代码中组合动画的实现方式:</p>    <pre>  <code class="language-java">Animation alpha = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);  Animation translate = AnimationUtils.loadAnimation(this, R.anim.translate_anim);  AnimationSet set = new AnimationSet(false);  set.addAnimation(alpha);  set.addAnimation(translate);  ivFrame.startAnimation(set);  </code></pre>    <p>到这里四种补间动画终于算是介绍完成了,下面在带来一点技巧</p>    <pre>  <code class="language-java">alpha.setAnimationListener(new Animation.AnimationListener() {   @Override   public void onAnimationStart(Animation animation) {     }     @Override   public void onAnimationEnd(Animation animation) {     }     @Override   public void onAnimationRepeat(Animation animation) {     }   });  </code></pre>    <p>给动画设置一个侦听,在一些回调中做你的操作。</p>    <p><strong>停止一个补间动画的正确姿势:</strong></p>    <pre>  <code class="language-java">public void stopAnimation(View v) {   v.clearAnimation();   if (canCancelAnimation()) {   v.animate().cancel();   }   animation.setAnimationListener(null);   v.setAnimation(null);  }  public static boolean canCancelAnimation() {   return Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH;  }  </code></pre>    <p>啊哈,终于完成本文了,希望大家遇到动画的需求不要怂,拿起键盘开写就对了,未来会给大家带来 <strong>属性动画</strong> 的教程。</p>    <p> </p>    <p>来自:https://itsmelo.github.io/2016/10/31/帧动画和补间动画/</p>    <p> </p>