Android 動畫

Android 動畫在開發(fā)中是不可或缺的功能，或者說是界面靈動的添加劑。那你是否總結(jié)過 Android 中總共為開發(fā)者提供了多少種方式的動畫呢？今天就為大家總結(jié)歸納一下。

報告老師，我知道

我話音未落，前排那位騷氣不減當(dāng)年、故事布滿雙眼的大胸弟就激動得高高舉起了那只滿是老繭的右手：“我知道，我知道！都有平移動畫、縮放動畫、旋轉(zhuǎn)動畫、漸變動畫、還有......”

看著這位兄弟回答時專注又冥思苦想的表情，我真不忍心傷害他那顆純真的幼小心靈。于是我決定說一個謊：“這位同學(xué)，你說的太對了！你都知道的這么全面了還出來聽課真是太辛苦了。這么熱的天，不如回家吹吹空調(diào)、吃吃西瓜，把這次學(xué)習(xí)的機(jī)會讓給更需要的人不挺好嗎！”

看著那位兄弟一臉滿足后遠(yuǎn)去的歡快背影，我終于可以放心的開始今天重點(diǎn)了。好了，上面內(nèi)容純屬扯淡，轉(zhuǎn)入正題。

本文章一部分教程圖片來自網(wǎng)絡(luò)，在這里先對這些圖片的作者表示感謝。

動畫種類

Android 動畫可以歸納為以下幾種：

• 視圖動畫（View 動畫）
• 幀動畫（Frame 動畫、Drawable 動畫）
• 屬性動畫
• 觸摸反饋動畫（Ripple Effect）
• 揭露動畫（Reveal Effect）
• 轉(zhuǎn)場動畫 & 共享元素（Activity 切換動畫）
• 視圖狀態(tài)動畫（Animate View State Changes）
• 矢量圖動畫（Vector 動畫）
• 約束布局實(shí)現(xiàn)的關(guān)鍵幀動畫（ConstraintSet 動畫）

上面動畫分類是個人通過每種動畫種類概念的獨(dú)立性來劃分的，目前能想到的只有這么多，如果有所遺漏大家可以指點(diǎn)出來以供我后續(xù)完善。

可能有很多人迅速的反應(yīng)出，缺少了目前使用也相對較多的 airbnb/lottie-android 動畫。不可置疑，Lottie 庫目前在 Android 開發(fā)中尤其復(fù)雜動畫效果上地位顯著。但我們今天要是的 Android 原生上為我們提供的能使用的動畫方式，Lottie 動畫今天暫且擱置。同時對于 RecyclerView item 加載動畫今天也暫且不提。我們且把這些動畫歸為其他，并不是把它們遺忘了。

詳盡教程

對于上面列舉的動畫種類，可能大家對部分較常用的動畫早已熟練應(yīng)用，比如 View 動畫、屬性動畫等。而對部分較少使用（比如 揭露動畫）、或者常常使用卻從未意識到它也屬于動畫的一種（比如 觸摸反饋動畫）知道的并不是那么全面?！澳敲唇裉炀鸵灰粸榇蠹以敿?xì)講解每種動畫的概念”，那是不可能滴~~，就這么點(diǎn)篇幅，這么可能把每種動畫都細(xì)說下來。

要這些動畫一一梳理清晰，那將是一項(xiàng)浩大的工作，而我已經(jīng)為大家總結(jié)成了一個《詳盡 Android 動畫系列教程》，大家可以到
https://github.com/OCNYang/Android-Animation-Set
進(jìn)行查看，由于動畫知識點(diǎn)涉及的太多而教程詳細(xì)程度令人發(fā)指，大家可以收藏起來慢慢查看。另外總結(jié)的教程中每種動畫都提供了動畫示例，大家可以結(jié)合源碼細(xì)細(xì)品味。（上面總結(jié)的系列教程，大多數(shù)都是借用前人總結(jié)的教程，選用的都是針對每種動畫網(wǎng)上流傳的最詳細(xì)全面的教程，在梳理中對部分錯誤也進(jìn)行了更正。）

那今天的任務(wù)是什么呢？接下來主要通過粗略的介紹來講解每種動畫在開發(fā)中都適用在哪種場景。

視圖動畫（View 動畫）

自從有了屬性動畫，View 動畫的處境就非常凄涼，但有時我們需要的僅僅就是簡易的動畫效果，那我們使用 View 動畫起來就十分便捷。

View 動畫的一個特點(diǎn)就是，他的動畫僅僅是動的 View 的繪制地方，View 真正的位置并沒有一起動畫。

View 一般會用作直接作用頁面中的 View 上，實(shí)現(xiàn)基本的動畫效果：平移、旋轉(zhuǎn)、縮放、透明度、或前幾者的交集：

view_animation_base

除了這幾種用法還有幾種特殊的使用場景：

• 1. 給 PopupWindow 設(shè)置顯示隱藏的動畫效果：

大家可以對比一下默認(rèn)動畫和設(shè)置后的動畫效果對比：

默認(rèn)效果

自定義效果

• 2. 給 Activity 設(shè)置頁面跳轉(zhuǎn)、退出動畫效果：

Activity 過場動畫效果可以通過很多方式設(shè)置，而使用 View 動畫實(shí)現(xiàn)的方式就是借助設(shè)置
overridePendingTransition(int enterAnim, int exitAnim) 方法。跟在 startActivity() 或 finish() 后面，在頁面轉(zhuǎn)換時就顯示上面方法設(shè)置的切換動畫效果。

效果對比：

默認(rèn)效果

自定義效果

• 3. 給 ViewGroup 設(shè)置子控件的進(jìn)場動畫效果：

就是通過給 ViewGroup 控件設(shè)置一條 android:layoutAnimation="@anim/anim_layout" 的屬性。而 anim_layout 就是 ViewGroup 中子控件在第一次顯示時的進(jìn)場動畫效果。

效果如下：

默認(rèn)效果

自定義效果

LayoutAnimation 適用于所有的 ViewGroup ，自然也包含 ListView、RecyclerView 等控件。上面說過 LayoutAnimation 提供的是進(jìn)場動畫效果，所以只在 ViewGroup 第一次加載子 View 時顯示一次，所以列表控件的 item 加載動畫我們一般不使用它，我們會使用 列表 專門的 Item 加載動畫， 比如 recyclerView.setItemAnimator() 等。

幀動畫

動畫書

幀動畫這個很好理解，其實(shí)就和看的動畫片一樣，每一幀代表一個畫面動作，當(dāng)快速逐幀顯示時，速度到達(dá)人眼無法分辨每一幀時，就達(dá)到了動畫的效果。

在使用中，先要準(zhǔn)備好每一幀的素材圖片：

幀動畫素材圖

然后播放出來就成了動畫的效果：

demo2.gif

要說起幀動畫的使用場景，在開發(fā)中使用的真是少之又少，一般會有兩種：

• 設(shè)備的開關(guān)機(jī)動畫
• “復(fù)雜” 的動畫效果，看似不可能完成的動畫

之所以說開機(jī)動畫是幀動畫。是因?yàn)橐话汩_機(jī)動畫是通過 system/media/bootanimation.zip 這個壓縮包，bootanimation 里面主要包含一個 desc.txt 以及 N 個文件夾。而文件夾里面放著的就是開機(jī)動畫的圖片資源。decs.txt 的作用就是指導(dǎo)系統(tǒng)如何去執(zhí)行開機(jī)動畫。
desc.txt 編寫規(guī)范，例如開機(jī)動畫需要用到 2 個文件夾，分別是 folder1 和 folder2，開機(jī)的時候，先把 folder1 里面的圖片都播放一遍，然后再循環(huán)播放 folder2 里面的文件，直到進(jìn)入系統(tǒng)。

而在開發(fā)中，開機(jī)動畫我們一般涉及不到的。而常常使用到的是，當(dāng)我們需要一些比較復(fù)雜的圖片動畫顯示效果時，其他動畫又實(shí)現(xiàn)不了，這時我們可以考慮幀動畫，但要注意防止 OOM。
其實(shí)真正用到幀動畫時，更多的時候我們還不如使用 GIF 圖片代替，現(xiàn)在幾個主流圖片加載框架都支持 GIF 圖片，同時也能控制 GIF 的播放時機(jī)。

屬性動畫

屬性動畫所提供的功能和 View 動畫十分相似。但兩者在實(shí)現(xiàn)原理上完全不同，而相對 View 動畫來說，屬性動畫要強(qiáng)大的許多。這里我們先對兩者做個對比：

View 動畫/視圖動畫：

1. View 動畫只能為 View 添加動畫效果，且不能監(jiān)聽 View 相關(guān)屬性的變化過程。
2. View 動畫提供的動畫能力較為單一，目前只支持幀動畫、縮放動畫、位移動畫、旋轉(zhuǎn)動畫、透明度動畫以及這些動畫的集合動畫。
3. View動畫改變的是 View 的繪制效果，View 的真正位置和相關(guān)屬性并不會改變，這也就造成了點(diǎn)擊事件的觸發(fā)區(qū)域是動畫前的位置而不是動畫后的位置的原因。

屬性動畫

1. 屬性動畫作用對象不局限在 View 上，而是任何提供了 Getter 和 Setter 方法的對象的屬性上。
2. 屬性動畫沒有直接改變 View 狀態(tài)的能力，而是通過動態(tài)改變 View 相關(guān)屬性的方式來改變 View 的顯示效果。
3. 屬性動畫使用更方便，可以用更簡潔的代碼實(shí)現(xiàn)相關(guān)的動畫效果。
4. 屬性動畫上手難度較高，對于 propertyName 需要自己去挖掘，或者自己通過 Wrapper 的方式去自定義 propertyName。
5. 屬性動畫是 Android3.0 以上系統(tǒng)提供的能力，在 3.0 以下需導(dǎo)入 nineoldandroids 三方庫解決兼容性問題。

那屬性動畫的使用場景有哪些呢？

• 基本上視圖動畫作用在 View 上的動畫效果，屬性動畫都可以實(shí)現(xiàn)；
• 在自定義 View 時，需要實(shí)現(xiàn)一些復(fù)雜的動畫效果，或?qū)?View 的一些特殊屬性值進(jìn)行動畫變更時，視圖動畫無法實(shí)現(xiàn)時；
• 另外，屬性動畫你也可以用在非動畫場景，比如，你在自定義 View 需要一個有一定規(guī)律（根據(jù)特定差值器變化）且可監(jiān)聽的數(shù)值變化器，這個時候借助屬性動畫是再合適不過了。

屬性動畫是功能更強(qiáng)大、實(shí)現(xiàn)方式更優(yōu)雅的動畫解決方案，在為自定義 View 設(shè)置動效上有著非常強(qiáng)大的表現(xiàn)能力，可以實(shí)現(xiàn) View 動畫實(shí)現(xiàn)不了的更加炫酷的動畫效果。詳細(xì)的屬性動畫介紹可以去查看 《Android 動畫詳盡教程》系列。

這里盜一張前段時間有位網(wǎng)友實(shí)現(xiàn)的靈動的紅鯉魚效果，具體的實(shí)現(xiàn)也用到了不少屬性動畫的原理。

靈動的紅鯉魚

觸摸反饋動畫（Ripple Effect）

所謂觸摸反饋動畫就是一種點(diǎn)擊效果，作用在可點(diǎn)擊的 View 上時，當(dāng)有點(diǎn)擊事件時會有漣漪般的反饋效果，使用在 按鈕 上是再好不過了。

Ripple 波紋效果有兩種：

//有邊界
?android:attr/selectableItemBackground
//無邊界 （要求API21以上）
?android:attr/selectableItemBackgroundBorderless 

效果分別為：

有邊界效果

無邊界效果

使用也非常簡單，只要將上面兩種效果設(shè)置為控件的背景或者前景就好了，同時需要給控件設(shè)置點(diǎn)擊事件、或把控件設(shè)置為可點(diǎn)擊 android:clickable="true"

揭露動畫（Reveal Effect）

揭露動畫在系統(tǒng)中很常見，就是類似波紋的效果， 從某一個點(diǎn)向四周展開或者從四周向某一點(diǎn)聚合起來。

• 可以用在 Activity 里面的 View 動畫效果，用來揭露某個隱藏 View 的顯示；*
• 也可以使用在 Activity 跳轉(zhuǎn)過渡動畫中。

如下圖使用時的一些效果：

顯示隱藏View揭露動畫

如果加上些 View 動畫效果，結(jié)合后成這樣：

與基礎(chǔ)動畫效果結(jié)合

同時它還可以和下面要說的轉(zhuǎn)場動畫結(jié)合成下面更酷炫的效果：

與轉(zhuǎn)場動畫結(jié)合

上面動畫效果是：先使用轉(zhuǎn)場動畫的共享元素轉(zhuǎn)場，然后再使用揭露動畫顯示 View。

轉(zhuǎn)場動畫 & 共享元素（Activity 切換動畫）

轉(zhuǎn)場動畫聽名字就知道它的使用場景了，轉(zhuǎn)場、轉(zhuǎn)場自然是用在場景轉(zhuǎn)換的時候：

• 轉(zhuǎn)場效果我們一般用在 Activity 切換時的動畫效果上；
• 共享元素一般我們使用在轉(zhuǎn)換的前后兩個頁面有共同元素_[注1]時；
• 同時也可以在 Activity 布局發(fā)生場景變化時，讓其中的 View 產(chǎn)生相應(yīng)的過渡動畫。

共同元素_[注1]：并非限制指作用的兩個共享元素的狀態(tài)、大小、顯示位置完全相同。而是指兩者在頁面中要傳遞的內(nèi)容相同，比如是從文章列表轉(zhuǎn)到文章詳情頁面時的相同標(biāo)題、主圖等。如果共享元素的兩者是不同的元素，一方面在顯示時共享元素在將結(jié)束轉(zhuǎn)場完成轉(zhuǎn)換時會有顯示的閃動，另一方面，如果兩者表達(dá)的是不同的元素，用戶也會感到很莫名。

話不多說，放上效果圖：

轉(zhuǎn)場效果

transition_animation.gif

視圖狀態(tài)動畫（Animate View State Changes）

所謂視圖狀態(tài)動畫，就是 View 在狀態(tài)改變時執(zhí)行的動畫效果。和之前我們通過 selector 選擇器給 Button 設(shè)置不同狀態(tài)下的背景效果是一樣一樣的。

當(dāng)然，它的使用場景也是特定的：

• 當(dāng) View 的狀態(tài)改變時，希望此時顯示的效果和靜態(tài)效果有所區(qū)分，即顯示效果也做出相應(yīng)的改變，比如 Z 軸抬高，大小改變、或其他動畫效果等。

放上一個按鈕被點(diǎn)擊后設(shè)置的視圖狀態(tài)動畫：

demo7.gif

矢量圖動畫（Vector 動畫）

不知道大家現(xiàn)在在開發(fā)中，在圖標(biāo)顯示上是不是還在切各種尺寸的 .png 圖片適配?，F(xiàn)在我可是一直在使用 svg 圖標(biāo)（在開發(fā)中是通過轉(zhuǎn)換成 Vector 再使用，現(xiàn)在 AS 中導(dǎo)入，可以自動完成轉(zhuǎn)換，轉(zhuǎn)換不成功的再用上面網(wǎng)址轉(zhuǎn)換），svg 圖標(biāo)的好處自不用說了。那矢量圖動畫有是怎么回事呢？

VectorDrawable 一般是以 <vector> 為根標(biāo)簽定義的 XML 文件，<vector>、<group>、<clip-path>、<path> 元素都有各自可以播放動畫的屬性。具體怎么生成具有動畫效果的圖標(biāo)，可以在系列教程中查看。

我們可以在以下場景使用：

• 具有動態(tài)變換效果的圖標(biāo)；
• 也可以用在需要特定動畫效果的 VectorDrawable 圖片上。

image

奔跑的圖釘

約束布局實(shí)現(xiàn)的關(guān)鍵幀動畫（ConstraintSet 動畫）

這個動畫就比較新了，甚至連官方都沒有提供完整的文檔。這是通過 ConstraintLayout 實(shí)現(xiàn)的一種關(guān)鍵幀動畫。

關(guān)鍵幀動畫：(百度百科)任何動畫要表現(xiàn)運(yùn)動或變化，至少前后要給出兩個不同的關(guān)鍵狀態(tài)，而中間狀態(tài)的變化和銜接電腦可以自動完成，在 Flash 中，表示關(guān)鍵狀態(tài)的幀動畫叫做關(guān)鍵幀動畫
所謂關(guān)鍵幀動畫，就是給需要動畫效果的屬性，準(zhǔn)備一組與時間相關(guān)的值，這些值都是在動畫序列中比較關(guān)鍵的幀中提取出來的，而其他時間幀中的值，可以用這些關(guān)鍵值，采用特定的插值方法計(jì)算得到，從而達(dá)到比較流暢的動畫效果。

而 ConstraintSet 動畫既然實(shí)現(xiàn)的是關(guān)鍵幀動畫，那至少需要兩個關(guān)鍵幀，而對于 ConstraintSet 來說每次需要的兩個關(guān)鍵幀就是兩種布局狀態(tài)，而兩種布局狀態(tài)的轉(zhuǎn)變過程 ConstraintSet 會生成一定的動畫過渡。

那使用場景根據(jù)約束動畫的說明也比較明顯了，就是同一個布局需要重新調(diào)整布局內(nèi)部 View 位置時使用。

約束布局動畫

更詳細(xì)的動畫介紹

這里介紹的只是對 Android 各個種類的動畫進(jìn)行了一個簡單的介紹，如果你要更加詳細(xì)更加全面的查看 Android 各個動畫的系列教程，可以到本文章同系列文章教程進(jìn)行查看：

Android 動畫詳盡教程：https://github.com/OCNYang/Android-Animation-Set

本篇教程終于完了，這時我又想起了文章開頭那個大胸弟，我想他此刻肯定在家正洋洋得意的啃著大西瓜。不多說了，如此炎熱的天氣，我也要去啃個西瓜撫慰一下狂躁的心。