Android 應用的動畫實踐--View Animation篇

前言

嘗試搜索了一下android 動畫的中文資料，很多都是一些枯燥的翻譯api的一些文檔，很少有系統講解如何利用動畫開發一個應用的資料，忽然，發現很多應用也不怎么注重動畫在app的應用，想了想，自己嘗試總結一下吧。因為，本人也不是什么動畫制作師，沒法把動畫做得很絢麗，只好，利用內置的效果，進行簡單加工，如何發揮，由各位的創意來定。鑒於，很多有關的android的動畫資料里面，都是堆代碼的，所以，全部代碼均放在了github上面，查看完整代碼可以移步到github上面去。

特地說明一下，由於android 模擬器和錄制工具的原因，例子展示中的gif 的抽筋播放效果不等同於實際效果，自己腦補把抽筋的部分去掉

android 動畫基礎

在Android 里你能夠使用的動畫效果：

• 平移

• 縮放

• 旋轉

• 透明

以上動畫的基本使用就是本文的內容了。由於，本人的能力問題，實在搞不出讓人眼前一亮的動畫，就湊合着看着吧。不過，那些令人贊嘆的動畫效果的基礎就是這些。

Interpolators（插值器）

一般而言，要做動畫的，需要封裝點物理公式，用作為計算幀與幀間的數值計算，不過，如果，只是，為了搞些動畫讓app好用一些，倒不需要搞得這么復雜，android 官方api 已經封裝好了一些常用的動畫插值器。

默認內置7種類型的插值器，個人覺得，如果只是應用里面的一些動畫的話這7個就夠用了。

1. AccelerateInterpolator

   加速
   

2. Decelerate

   減速
   

3. AccelerateDecelerateInterpolator

   開始，和結尾都很慢，但是，中間加速
   

4. AnticipateInterpolator

   開始向后一點，然后，往前拋
   

5. OvershootInterpolator

   往前拋超過一點，然后返回來
   

6. AnticipateOvershootInterpolator

   開始向后一點，往前拋過點，然后返回來
   

7. BounceInterpolator

   結束的時候彈一下
   

8. LinearInterpolator

   勻速

以上動畫都源自android官方api demo，用eclipse adt android 選擇例子項目導航，然后，選擇APIDEMOS 就能創建（什么沒聽說過？現在知道了吧。。。）

好了，雖然截取的gif 動畫播放起來有點抽筋的感覺，接下來我們該如何在應用中使用這些知識呢？

組合動畫

目前講解動畫api 的資料比較多，這里就不在重復那些基礎的知識了！

現在讓我們學習一下，如何利用，平移，縮放，旋轉創造出讓人眼前一亮的動畫.

為了，更有目的的使用動畫，下面假想一個使用場景。

假想：商品購物車案例

Notice :為了方便看效果，動畫延時時間將會設置的比較長。特地說明一下：假想就是隨便想，切勿對號入座。

任務：

為了，讓商城app有更好的交互效果，決定對購物車控件和商品控件上面加一些動畫效果。

購物車動畫設計方案：

利用，透明，平移，對購物車的出現和離開增加動畫交互效果。

經過一番努力效果如下(湊合着看吧。。)：

相關知識點

一些動畫常用的通用基礎屬性：

Notice: 所謂通用就是說所有動畫標簽都適用於這些屬性

• android:duration 設置動畫播放的時間
• android:startOffset 設置動畫的開始播放時間
• andorid:interpolator 設置動畫的插值器
• android:repeatCount 動畫播放的常用次數
• android:repeatMode 動畫重播的模式，即從頭到尾，從頭到尾，還是從頭到尾，在從尾到頭。

透明的使用:

<alpha />

value 從 0 （透明） 到 1 （不透明）在android中透明主要用於對view 淡入，淡出的效果控制主要有兩個屬性

• android:fromAlpha view在動畫開始的透明度。
• android:toAlpha view在動畫結束的透明度。

平移的使用：

<translate />

支持使用 %，如 “50%“ 獲取的是這個view的百分之50，除此之外還有另外一種寫法：”50%p“ 意思是獲取這個view的上一級view的百分之50 當然，指定特定值也是支持的“22.2”，不過為了兼容更多的android設備建議還是使用百分比的值。

• android:fromXDelta

• android：fromYDelta

  from?Delta 意思是開始的軸線

• android:toXDelta

• android：toYDelta

  to?Delta 意思是結束的軸線

這次的方案展示了兩個插值器的使用：

用於出現的：BounceInterpolator

用於離開的： AnticipateInterpolator

什么是插值器？

所謂插值器就是用於數值的起始間的變化，就是相當於一個類似於物理引擎的東西。android官方內置了一些簡單常用的數值變換，讓我們，不需要去學習相關的物理知識。

例如：

開始值為1，結束值為 100.那么我們如何控制變化這個值的變化過程呢？這里就是插值器的使用。

一般勻速的話就是：

1,2,3,4,5...100。 然后我們就會看到物體以一個勻速的速度進行平移操作。

那么我們需要物體像汽車那樣加速度的前進，我們可以用加速插值器，我們從1到100的過程，就會是：

1,2,4,5,8，16.。。。。100 展示在我們面前的view對象就會以一個加速度的形式進行平移。

有很多應用開發者並不熟悉動畫制作的一些基礎知識，可能不太明白。現在，通過對源碼進行分析，來徹底搞明白這個概念。

我們分析一些Interpolator 類樹：

從api文檔TimeInterpolator 我們可以知道，這個插值器的實現只有一個方法：

getInterpolation(float t);

然后我們挑選前面用過的BounceInterpolator 看下，它是如何實現這個方法。如果感興趣的，可以按照這種方法，把其他幾個插值器的實現都看一遍。

最后我們會發現，插值器的作用就是返回值。

接着我們來看下Animation line:869 是怎么用這個接口的.

看完這這幾個地方，相信應該對android 動畫框架怎么對值進行變換的原理應該有所了解。

有了以上知識，我們對android的動畫框架基本上已經完全了解，現在，我們利用學到的知識，進行更好的動畫設計。

我們接着剛才的案例，着手設計商品控件的動畫設計

商品動畫設計：

這次，我們學習一個新的動畫標簽縮放(<scale>)

效果如下：

<scale />

使view 大點或者小點

• android:fromXScale

• android：fromYScale

  from?Scale 意思是開始軸線的縮放比例（默認 1.0）

• android:toXScale

• android：toYScale

  to?Scale 意思是結束軸線的縮放比例（默認 1.0）

• android:pivotX

• android:pivotX

  旋轉用的軸點坐標

最后我們把購物車的動畫，和商品的動畫在組合起來。效果如下：

添加商品的時候，如果購物車還沒出現，先出現購物車顯示的動畫，在進行商品的動畫播放。

具體實現 line: 77 -104

 

這次我們學習一下如何監聽動畫的動作，對於AnimationListener()主要有三個

• onAnimationStart(Animation animation)

• onAnimationRepeat(Animation animation)

• onAnimationEnd(Animation animation)