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>