嗨大家今天過得好嗎？接下來幾天要進到比較動感的單元（？），預計會介紹動畫相關的幾個主題從動的範圍比較小的 Animated icon、可以與使用者互動的 Motion Layout 到不同頁面之間切換的 Layout Transition，透過動畫的效果可以讓你的 App 動起來、把操作變得更有趣。動畫的原理是利用眼睛的殘影造成的時間差，其實慢動作來看就是把多張圖片在很短的時間內連續改變而已，今天先介紹 Animated icon，透過實做方式的不同又分為連續疊出多張圖片的 Animation Drawable 和連續顯示向量圖片的 Animated Vector Drawable。

Animation Drawable

首先要在 res/drawable/ 的路徑下新增 animation-list 類型的檔案， 如果動畫只要顯示一次、並沒有要連續的話就加上 android:oneshot 的屬性並設為 true，反之需要連續的動畫就設為 false。新增好了的 res 就像其他 drawable resource 一樣可以當成背景使用，在 View 中把剛剛新增的 animation drawable 設為 ImageView 的背景，之後再呼叫 start() 就可以開始顯示動畫了。

Animated Vector Drawable

前面介紹的 Animation Drawable 是把一張張的圖片在很短的時間連續顯示，但一些簡單的圖形我們也許不用完整的一張張圖片 ( 圖片就會有裝置解析度不同的問題要另外處理 )，只要用向量定義起始、結束位置和顏色，還有動畫的時間長度後就可以開始了！

一樣是在 res/drawable/ 的路徑下但是新增 vector 的向量檔定義 group 和 path，group 是集合底下可以包含很多 sub group 和 path，path 則是向量的顏色和路徑，每個 group 和 path 都有對應的 id，定義好向量之後還不是動畫，還要在一樣的路徑下新增 animated-vector 的檔案，把要產生動畫的向量加上 android:animation 的屬性才能讓向量動起來。animation 的屬性會對應到 objectAnimator 的檔案，在內部定義動畫的 id、時間長、起始值。

通常可能會想知道動畫的狀態，例如動畫的開始和結束、或是是否被觸發，例如控制播放與暫停的播放鍵就很適合新增 Animated icon 的效果，我們就需要知道 icon 目前的狀態才能控制要顯示播放或是暫停的 icon，這時像之前介紹過「使用 res 的正確姿勢 (3)：番外篇」一樣在 res 加上 state 就可以讓外部掌握目前的狀態並互相切換。

看完 Animated icon 後覺得最難的不是實作，難的是缺乏把動畫做得好看的美感，結尾也分享一篇把 icon 動畫做得蠻美的文章，看完這篇的實作後可以再去看看怎麼讓動畫變得更美。如果喜歡今天分享的內容的邦友請繼續關注「打造一個厲害的普通 Android App - 使用者體驗優化」的主題，我們明天見。