Android 应用的动画实践--View Animation篇

<h2 id="menuIndex0">前言</h2> <p>尝试搜索了一下android 动画的中文资料，不少都是一些枯燥的翻译api的一些文档，不多有系统讲解如何利用动画开发一个应用的资料，突然，发现不少应用也不怎么注重动画在app的应用，想了想，本身尝试总结一下吧。由于，本人也不是什么动画制做师，无法把动画作得很绚丽，只好，利用内置的效果，进行简单加工，如何发挥，由各位的创意来定。鉴于，不少有关的android的动画资料里面，都是堆代码的，因此，<a href="https://github.com/youxiachai/AnimUtils">所有代码均放在了github上面，查看完整代码能够移步到github上面去</a>。</p> <p><strong>特意说明一下，因为android 模拟器和录制工具的缘由，例子展现中的gif 的抽筋播放效果不等同于实际效果，本身脑补把抽筋的部分去掉</strong> <a name="more"></a></p> <h2 id="menuIndex1">android 动画基础</h2> <p>在Android 里你可以使用的动画效果：</p> <ul> <li> <p>平移</p> </li> <li> <p>缩放</p> </li> <li> <p>旋转</p> </li> <li> <p>透明</p> </li> </ul> <p>以上动画的基本使用就是本文的内容了。因为，本人的能力问题，实在搞不出让人眼前一亮的动画，就凑合着看着吧。不过，那些使人赞叹的动画效果的基础就是这些。</p> <h3 id="menuIndex2">Interpolators（插值器）</h3> <p>通常而言，要作动画的，须要封装点物理公式，用做为计算帧与帧间的数值计算，不过，若是，只是，为了搞些动画让app好用一些，倒不须要搞得这么复杂，android 官方api 已经封装好了一些经常使用的动画插值器。</p> <p>默认内置7种类型的插值器，我的以为，若是只是应用里面的一些动画的话这7个就够用了。</p> <ol> <li> <p>AccelerateInterpolator</p> <blockquote> <p>加速 <br /><a href="http://static.oschina.net/uploads/img/201305/31023246_KWRf.gif"><img style="display: inline" title="AccelerateInterpolator" alt="AccelerateInterpolator" src="http://static.oschina.net/uploads/img/201305/31023248_1KZr.gif" width="203" height="240" /></a> </p> </blockquote> </li> <li> <p>Decelerate</p> <blockquote> <p>减速 <br /><a href="http://static.oschina.net/uploads/img/201305/31023250_reu9.gif"><img style="display: inline" title="decelerate" alt="decelerate" src="http://static.oschina.net/uploads/img/201305/31023252_Pfyb.gif" width="203" height="240" /></a> </p> </blockquote> </li> <li> <p>AccelerateDecelerateInterpolator</p> <blockquote> <p>开始，和结尾都很慢，可是，中间加速 <br /><a href="http://static.oschina.net/uploads/img/201305/31023254_MQ67.gif"><img style="display: inline" title="accelerate_decelerate" alt="accelerate_decelerate" src="http://static.oschina.net/uploads/img/201305/31023256_OSQ4.gif" width="203" height="240" /></a> </p> </blockquote> </li> <li> <p>AnticipateInterpolator</p> <blockquote> <p>开始向后一点，而后，往前抛 <br /><a href="http://static.oschina.net/uploads/img/201305/31023257_InBD.gif"><img style="display: inline" title="AccelerateInterpolator" alt="AccelerateInterpolator" src="http://static.oschina.net/uploads/img/201305/31023259_bh7g.gif" width="203" height="240" /></a> </p> </blockquote> </li> <li> <p>OvershootInterpolator</p> <blockquote> <p>往前抛超过一点，而后返回来 <br /><a href="http://static.oschina.net/uploads/img/201305/31023301_PEkX.gif"><img style="display: inline" title="overshoot" alt="overshoot" src="http://static.oschina.net/uploads/img/201305/31023303_Gcaw.gif" width="203" height="240" /></a> </p> </blockquote> </li> <li> <p>AnticipateOvershootInterpolator</p> <blockquote> <p>开始向后一点，往前抛过点，而后返回来 <br /><a href="http://static.oschina.net/uploads/img/201305/31023305_i6Z7.gif"><img style="display: inline" title="anticipate_overshoot" alt="anticipate_overshoot" src="http://static.oschina.net/uploads/img/201305/31023307_mdFT.gif" width="203" height="240" /></a> </p> </blockquote> </li> <li> <p>BounceInterpolator</p> <blockquote> <p>结束的时候弹一下 <br /><a href="http://static.oschina.net/uploads/img/201305/31023309_6LYL.gif"><img style="display: inline" title="bounce" alt="bounce" src="http://static.oschina.net/uploads/img/201305/31023311_VaQg.gif" width="203" height="240" /></a> </p> </blockquote> </li> <li> <p>LinearInterpolator</p> <blockquote> <p>匀速</p> </blockquote> </li> </ol> <p>以上动画都源自android官方api demo，用eclipse adt android 选择例子项目导航，而后，选择APIDEMOS 就能建立（什么没据说过？如今知道了吧。。。）</p> <p>好了，虽然截取的gif 动画播放起来有点抽筋的感受，接下来咱们该如何在应用中使用这些知识呢？</p> <h3 id="menuIndex3">组合动画</h3> <p><strong>目前讲解动画api 的资料比较多，这里就不在重复那些基础的知识了！</strong></p> <p>如今让咱们学习一下，如何利用，平移，缩放，旋转创造出让人眼前一亮的动画.</p> <p>为了，更有目的的使用动画，下面假想一个使用场景。</p> <h4>假想：商品购物车案例</h4> <blockquote> <p>Notice :为了方便看效果，动画延时时间将会设置的比较长。特意说明一下：假想就是随便想，切勿对号入座。</p> </blockquote> <p>任务：</p> <p>为了，让商城app有更好的交互效果，决定对购物车控件和商品控件上面加一些动画效果。</p> <p>购物车动画设计方案：</p> <p>利用，透明，平移，对购物车的出现和离开增长动画交互效果。</p> <p><a href="https://github.com/youxiachai/AnimUtils/blob/master/AnimUtils/res/anim/in_translate_top.xml">通过一番努力效果以下(凑合着看吧。。)：</a></p> <blockquote> <p><a href="http://static.oschina.net/uploads/img/201305/31023312_DotS.gif"><img style="display: inline" title="anim1" alt="anim1" src="http://static.oschina.net/uploads/img/201305/31023314_KDGS.gif" width="203" height="240" /></a> </p> </blockquote> <h4>相关知识点</h4> <p>一些动画经常使用的通用基础属性：</p> <blockquote> <p>Notice: 所谓通用就是说全部动画标签都适用于这些属性</p> </blockquote> <ul> <li><code>android:duration</code> 设置动画播放的时间 </li> <li><code>android:startOffset</code> 设置动画的开始播放时间 </li> <li><code>andorid:interpolator</code> 设置动画的插值器 </li> <li><code>android:repeatCount</code> 动画播放的经常使用次数 </li> <li><code>android:repeatMode</code> 动画重播的模式，即从头至尾，从头至尾，仍是从头至尾，在从尾到头。 </li> </ul> <p>透明的使用:</p> <p><code>&lt;alpha /&gt;</code></p> <blockquote> <p>value 从 0 （透明） 到 1 （不透明）在android中透明主要用于对view 淡入，淡出的效果控制主要有两个属性</p> </blockquote> <ul> <li><code>android:fromAlpha</code> view在动画开始的透明度。 </li> <li><code>android:toAlpha</code> view在动画结束的透明度。 </li> </ul> <p>平移的使用：</p> <p><code>&lt;translate /&gt;</code></p> <blockquote> <p>支持使用 %，如 “50%“ 获取的是这个view的百分之50，除此以外还有另一种写法：”50%p“ 意思是获取这个view的上一级view的百分之50 固然，指定特定值也是支持的“22.2”，不过为了兼容更多的android设备建议仍是使用百分比的值。</p> </blockquote> <ul> <li> <p><code>android:fromXDelta</code> </p> </li> <li> <p><code>android：fromYDelta</code></p> <blockquote> <p>from?Delta 意思是开始的轴线</p> </blockquote> </li> <li> <p><code>android:toXDelta</code></p> </li> <li> <p><code>android：toYDelta</code> </p> <blockquote> <p>to?Delta 意思是结束的轴线</p> </blockquote> </li> </ul> <p>此次的方案展现了两个插值器的使用：</p> <p>用于出现的：BounceInterpolator</p> <p>用于离开的： AnticipateInterpolator</p> <h3 id="menuIndex4">什么是插值器？</h3> <p>所谓插值器就是用于数值的起始间的变化，就是至关于一个相似于物理引擎的东西。android官方内置了一些简单经常使用的数值变换，让咱们，不须要去学习相关的物理知识。</p> <p>例如：</p> <p>开始值为1，结束值为 100.那么咱们如何控制变化这个值的变化过程呢？这里就是插值器的使用。</p> <p>通常匀速的话就是：</p> <p>1,2,3,4,5...100。 而后咱们就会看到物体以一个匀速的速度进行平移操做。</p> <p>那么咱们须要物体像汽车那样加速度的前进，咱们能够用加速插值器，咱们从1到100的过程，就会是：</p> <p>1,2,4,5,8，16.。。。。100 展现在咱们面前的view对象就会以一个加速度的形式进行平移。</p> <p>有不少应用开发者并不熟悉动画制做的一些基础知识，可能不太明白。如今，经过对源码进行分析，来完全搞明白这个概念。</p> <p>咱们分析一些Interpolator 类树：</p> <p>从api文档<a href="https://developer.android.com/reference/android/animation/TimeInterpolator.html">TimeInterpolator</a> 咱们能够知道，这个插值器的实现只有一个方法：</p> <blockquote> <p><code>getInterpolation(float t);</code></p> </blockquote> <p>而后咱们挑选前面用过的<a href="https://github.com/android/platform_frameworks_base/blob/master/core/java/android/view/animation/BounceInterpolator.java">BounceInterpolator</a> 看下，它是如何实现这个方法。若是感兴趣的，能够按照这种方法，把其余几个插值器的实现都看一遍。</p> <p>最后咱们会发现，插值器的做用就是返回值。</p> <p>接着咱们来看下<a href="https://github.com/android/platform_frameworks_base/blob/master/core/java/android/view/animation/Animation.java">Animation line:869</a> 是怎么用这个接口的. </p> <p>看完这这几个地方，相信应该对android 动画框架怎么对值进行变换的原理应该有所了解。</p> <p>有了以上知识，咱们对android的动画框架基本上已经彻底了解，如今，咱们利用学到的知识，进行更好的动画设计。</p> <p>咱们接着刚才的案例，着手设计商品控件的动画设计</p> <p>商品动画设计：</p> <p>此次，咱们学习一个新的动画标签缩放(<code>&lt;scale&gt;</code>)</p> <p>效果以下：</p> <p><a href="http://static.oschina.net/uploads/img/201305/31023315_rGud.gif"><img style="display: inline" title="shop1" alt="shop1" src="http://static.oschina.net/uploads/img/201305/31023316_u8q7.gif" width="203" height="240" /></a> </p> <p><code>&lt;scale /&gt;</code></p> <blockquote> <p>使view 大点或者小点</p> </blockquote> <ul> <li> <p><code>android:fromXScale</code> </p> </li> <li> <p><code>android：fromYScale</code></p> <blockquote> <p>from?Scale 意思是开始轴线的缩放比例（默认 1.0）</p> </blockquote> </li> <li> <p><code>android:toXScale</code></p> </li> <li> <p><code>android：toYScale</code> </p> <blockquote> <p>to?Scale 意思是结束轴线的缩放比例（默认 1.0）</p> </blockquote> </li> <li> <p><code>android:pivotX</code></p> </li> <li> <p><code>android:pivotX</code></p> <blockquote> <p>旋转用的轴点坐标</p> </blockquote> </li> </ul> <p>最后咱们把购物车的动画，和商品的动画在组合起来。效果以下：</p> <p>添加商品的时候，若是购物车还没出现，先出现购物车显示的动画，在进行商品的动画播放。</p> <p><a href="https://github.com/youxiachai/AnimUtils/blob/master/AnimUtilsExample/src/com/youxiachai/animutils/example/MainActivity.java">具体实现 line: 77 -104</a></p> <p></p> <p><a href="http://static.oschina.net/uploads/img/201305/31023318_XLu4.gif"><img style="display: inline" title="shop2" alt="shop2" src="http://static.oschina.net/uploads/img/201305/31023320_RpDF.gif" width="203" height="240" /></a> </p> <p>此次咱们学习一下如何监听动画的动做，对于<code>AnimationListener()</code>主要有三个</p> <ul> <li> <p><code>onAnimationStart(Animation animation)</code></p> </li> <li> <p><code>onAnimationRepeat(Animation animation)</code></p> </li> <li> <p><code>onAnimationEnd(Animation animation)</code></p> </li> </ul>