轉自：https://mp.weixin.qq.com/s?__biz=MzIxMTg5NjQyMA==&mid=2247483735&idx=1&sn=d2092ef4dd3c6726a211c84c4509e8b9&chksm=974f105ca038994a4056359e2650dc2dd0ea93a9e5528ea0618a6afc64db0c87b6ea6826b490#rd

為什麼要學好動畫

動畫在移動App開發中的重要性不言而喻，通俗點講，動畫可以讓我們的App介面不那麼死板，可以帶來酷炫的互動效果，用Material Design專業點的說法，動畫是一種高階的使用者反饋，對使用者操作、選擇結果的一種反饋，對程式執行過程的動態展示，對使用者視覺和注意力的引導，幫助使用者更好地理解App的功能設計，Android5.0新生的動畫更是體現出這個理念。所以從這點上說，動畫的意義遠不止酷炫這一層面。

那麼我們就更加有理由要學好動畫，把動畫應用到我們的專案中去。從這篇文章開始，我們將會全面地學習Android中的動畫系統。我們會講到每一種動畫的原理、使用方法、應用場景、優缺點等，關於向量動畫，由於原理和實現方式相對複雜，我們會花比較大的篇幅來學習。最後，我們會封裝一個通用動畫庫來簡化動畫的使用。

OK，那我們廢話少說，開始一場愉快的Android動畫之旅吧！

大綱

Tween動畫

Tween動畫是Android最早的動畫框架，從Android1.0就開始提供。Tween動畫使用簡單，功能也不強，支援程式碼和xml兩種方式編寫動畫。我們來看一個演示：

這是一個常規的Tween動畫，用xml編寫動畫，用AnimationUtils載入動畫，實現如下：

Tween動畫使用起來簡單，效果也比較流暢，但是缺點也是很明顯，首先就是拓展性太差，只能寫移動、縮放、旋轉、漸變四種動畫，以及這四種動畫的組合，不支援自定義View的拓展。其次一個致命的缺點就是動畫只是螢幕繪製上的動畫，控制元件的屬性並沒有改變，一個經典的問題就是一個Button從一個地方移動到另一個地方，點選事件還是在原來的地方。所以Tween動畫我們現在也基本放棄了，所有使用Tween動畫的場景都可以用屬性動畫來替代。

下面屬性動畫閃亮登場

屬性動畫

屬性動畫是Android3.0版本推出的動畫框架，其功能和拓展性都很強。它不僅能實現所有Tween動畫的功能，還有很強的拓展性，根本原因是屬性動畫從本質上已經完全擺脫了控制元件，雖然我們大多數情況下使用屬性動畫都是給控制元件做動畫，但是屬性動畫的底層只是一個數值發生器，和控制元件沒有半毛錢關係。

[數值發生器]

ValueAnimator：數值發生器，這是屬性動畫的根本，ValueAnimator的功能就是在兩個數值範圍內，順序地產生過渡數值，過渡速率可以通過Intepolator來控制，過渡時間通過duration來設定，最終產生一組有特定變化速率的數值序列。那這個數值序列產生了幹嘛呢？你想幹嘛就幹嘛。

[應用動畫]

通過ValueAnimator我們得到了一組變化的數值序列，大多數情況下我們都是拿來給控制元件做動畫，實現如下：

我們使用ValueAnimator產生一組0-360的數值序列，數值變化速率遵循AccelerateInterpolator函式，時間為1000毫秒，然後在回撥函式裡我們可以獲取當前動畫值value，然後呼叫imageView.setRotationY(value);這樣就實現了imageView的旋轉動畫。效果如下：

[應用拓展]

上面產生的數值序列，我們除了可以用來做動畫，還可以用在任何你能想到的地方。比如我們有一個TextView顯示金額，這個金額要動畫地從0增加到2000，這就可以用ValueAnimator。

效果如下：

[ObjectAnimator]

可能你已經注意到了，ValueAnimator是屬性動畫底層的數值發生器，雖然拓展性很強，但是用它來寫動畫實在是麻煩，這一點Google當然也想到了，於是ObjectAnimator就誕生了，它把ValueAnimator封裝在裡面，我們用它可以簡單地實現對控制元件的動畫。程式碼如下：

效果和上面是一樣的

第一行程式碼有三個引數，分別是做動畫的控制元件, 需要動畫的屬性名，第三個是可變引數，表示動畫值的範圍。其中屬性名是一個字串，ObjectAnimator會根據這個屬性名拼一個set[屬性名]（setRotationY）方法，然後用反射呼叫，從而實現動畫。

[自定義View]

既然ValueAnimator可以用在任何地方，那當然也可以用在自定義View。我寫了一個很簡單的自定義View，就是畫一個扇形，扇形的角度由一個叫fraction的屬性決定。我們在自定View中需要做動畫的屬性一定要有一個setFraction方法，以便讓屬性動畫通過反射呼叫。

效果如下：

[Path動畫]

5.0之後，ObjectAnimator還有一個強大的功能，那就是根據一個Path路徑做動畫，先看效果：

這樣的效果要讓我們自己寫還是要費點事的，但是用ObjectAnimator來做就太簡單了：

什麼？和正常的用法基本一樣？是的，區別就是ObjectAnimator.ofFloat方法的過載，傳四個引數，第一個是做動畫的控制元件，第二和第三個是動畫的方向，第四個就是動畫的Path路徑，就是這麼簡單，剩下的就是構建Path了，Path的構建你可以隨心所欲。你能構建出多酷炫的Path，它就能展示多酷炫的動畫。

Interpolator

Interpolator翻譯叫插值器，它是個好東西，它用來控制動畫過程的變化速率，沒有它我們的動畫將會一直勻速變化，如果要自己控制變化速率那也太麻煩了。Android中Interpolator總共有8種。

1、[Linear]

2、[Accelerate]

3、[Decelerate]

4、[AccelerateDecelerate]

5、[Anticipate]

6、[Overshoot]

7、[Bounce]

8、[Cycle]

幀動畫

幀動畫是一個比較簡單的動畫框架，原理就像播放幻燈片一樣，傳一組圖片進去，然後依次迴圈播放，可以設定每一張圖片的播放時間。幀動畫可以通過xml建立，也可以java程式碼動態構建，使用起來還是比較方便的。先看效果：

程式碼如下：

可以看出來幀動畫的使用還是比較簡單的，但是缺點也很明顯，就是動畫不連續。如果要想動畫連續也簡單，就把圖片做的多一點，每張圖片只漸變一點點。但是這樣隨之而來的另一個問題就是圖片太多，體積太大。所以也只能在圖片流暢度和圖片數量體積之間做一個平衡。這點比較尷尬。但是一般來說用來做一個動畫的小Logo還是夠用的。

CircularReveral

這是Android5.0推出的新的動畫框架，可以給View做一個揭露效果。效果如下：

效果相當贊有木有！程式碼實現也很簡單：

五個引數分別是View，中心點座標，開始半徑，結束半徑。通過這五個引數的配合，我們可以做出很多不同的效果。

Activity轉場動畫

1、傳統轉場動畫

傳統轉場動畫我們再熟悉不過了，不再多說，直接看效果：

程式碼如下：

2、5.0新轉場動畫

這個厲害了！5.0新的轉場動畫分為4種，Explode、Slide、Fade、Share，傳統的轉場動畫只能作用於整個頁面，不能對頁面中的單個元素做控制，而5.0新轉場動畫可以控制頁面中的每個元素，根據元素動畫方式，分為4大類。
我們先來看下四種效果：

（1）Explode
Explode的效果是下一個頁面的元素從四面八方進入，最終形成完整的頁面。程式碼如下：

在跳轉時就要注意一點，intent後面還要再傳一個引數bundle，固定寫法ActivityOptions.makeSceneTransitionAnimation(this).toBundle()，下一個Activity根據這個就能識別出使用5.0新轉場動畫。

跳轉的Activity在onCreate方法中，呼叫getWindow().setEnterTransition(new Explode());即可，注意要在setContentView之前哦。

（2）Slide
Slide就是下一個頁面元素從底部依次向上運動，最終形成完整的頁面。程式碼如下：

和Explode幾乎沒有什麼區別，就是跳轉的Activity在onCreate方法中設定transition為Slide即可。

（3）Fade
Fade就是下一個頁面元素漸變出現，最終形成完整的頁面。程式碼如下：

同樣，就是跳轉的Activity在onCreate方法中設定transition為Fade即可，只不過這裡要最好要同時設定Enter和Exit。

（4）Share
Share是最複雜的一種轉場方式，在跳轉的兩個Activity之間，如果有相同的View元素，那麼，兩個元素就可以設定成共享狀態，在跳轉時，這個View就會從第一個Activity的顯示狀態過渡到第二個Activity的顯示狀態，給使用者的感覺彷彿是兩個Activity共享一個View。

我們再來單獨看下Share的效果：

很酷炫有木有~有木有~

前後兩個Activty都有兩個共同的元素，一個機器人Logo，一個Android文字，但是它們在兩個Activity中的位置、大小、顏色都不一樣。於是，在兩個Activity跳轉過程中，位置、大小、顏色會自動有一個漸變的過程，從第一個Activity的狀態漸變到第二個Activity的狀態。從而給人一種兩個Activity共享元素的感覺。

程式碼如下：

實現程式碼看上去比較多，實際也比較簡單。畢竟這麼酷炫的轉場動畫化，多寫兩行程式碼也值得。

（5）Share轉場的經典應用
Share轉場這種方式最經典的應用就是列表頁跳詳情頁。因為通常列表頁和詳情頁都會包含相同View元素，使用Share轉場給人一種連續過渡效果，體驗非常棒。

下面看一個簡單的示例：

好了，Activity轉場就講到這裡，充分利用這些動畫，可以做出非常精彩的轉場效果。