年底了，事多錢少，直接看問題吧：

之前我的小米手機系統進行了更新，然後發現這個息屏動畫挺好看的。

加上最近我在開始學習AE表示式了，雖然很多不是很熟悉，但還是想練練手。

所以今天我們就一起來製作一個小米息屏動畫吧！

由於息屏動畫沒有辦法錄下來，開始之前還是先給大家簡述一下這個動畫吧：

1、首先是時鐘，時針和分針會有一個關聯旋轉的動畫。

2、其次電量百分數減少，電量值也會跟著減少。

3、會有一個指紋的光亮動畫。

最重要的就是這三個點吧，圖形的繪製我當然是選擇在AI裡來操作。

好了，進入正題，首先開啟AI，新建一個黑色矩形鎖定充當背景，我這裡就不按照什麼標準的螢幕尺寸比例來弄了：

先做那個花型圖案吧，如圖所示再畫一個圓，顏色隨意，主要是用於參考圖案的大小：

新建三個圓，左右的為小圓，中間的為大圓：

再用混合工具將三個圓依次進行混合，混合步數我這裡覺得10步就可以了：

將混合以後的物件擴充套件：

將擴充套件後的物件取消編組，然後選擇工具按住噢特兒鍵單擊第一個圓。

在水平分佈間距這裡就可以輸入數值了，我這裡輸入的是8畫素，然後點選水平分佈間距：

接下來一步很重要，間隔的選擇圓，先將它們換一個顏色：

選中所有的圓，可以用參考線先定一箇中心點，然後用旋轉工具圍繞著這個中心點旋轉10度，點選複製：

然後康秋D重複變換，這一步不用說吧：

重新調整圖形的大小，用魔棒工具選中其中一個顏色的圓，相同的顏色圓就都被選中了：

因為我們之前是旋轉的10度，所以再將選中的圓旋轉一半的度數5度，點選確定：

這個時候再用漸變工具去調整顏色，不過你可能發現每個小球的漸變色是單獨的：

沒關係，再用漸變工具拉一下就可以了：

用矩形工具畫時針和分針，然後把矩形搞成圓角，這一步不用說吧：

中間再畫一個圓：

再畫一個小一點的黑色圓，把白色圓和黑色圓編組，你可能會問為什麼不直接畫描邊。

這是因為如果只是描邊的話，時針和分針就必須放在描邊下面，但是後面做動畫的時候，旋轉的中心點容易跑偏：

文字打上日期這個沒有什麼可說的，電量百分數這裡要說一下，因為我們後面要做數字從100減到0的動畫，直接使用AI匯入AE的文字是做不了的。

所以這裡的100和百分號是兩個分開的圖層，到時候在AE裡100需要重新手動輸入，以這個圖層的位置和大小作為參考：

矩形工具畫電量框，變成圓角這一步不用說吧：

用偏移路徑工具做出中間的電量，再改為填充色：

最後再做個指紋吧，感覺今天的篇幅又很長，先勾選對齊網格以及顯示網格，這樣有助於後面的操作：

康秋Y進入線框模式，用極座標工具透過上下左右的方向鍵畫一個圓環出來，我這裡是8個圓：

再用極座標畫一個四分之一的圓環，圓的數量是前面的一半：

將小圓環移動到如圖所示的位置：

選中兩個圓環執行路徑查詢器-輪廓：

再用小白工具框選去刪除多餘的部分：

刪完以後大概這個樣子，再把描邊改為圓頭：

可以給路徑新增一些錨點：

再用小白工具隨機的刪除一些線段，最後大概是這樣：

這樣大體繪製部分就差不多了，唉，篇幅又好長啊，將圖層釋放吧：

養成好習慣，釋放以後刪除多餘的圖層（比如參考線圖層），並且給圖層重新命名，方便後面在AE裡操作：

終於到了AE的操作了，把AI匯入AE，可以看到各個命名好的圖層，做一下合成設定，我這裡就做250幀也就是10秒的動畫吧：

先做時針和分針的動畫吧，使用錨點工具將時針和分針圖層的中心點移動到時鐘的中心：

新建空物體，重新命名為控制器，給控制器新增特效-表示式控制-角度控制：

展開分針的屬性，按住噢特兒鍵滑鼠單擊旋轉屬性前面的小碼錶：

拉動橡皮筋，將分針的旋轉屬性關聯到角度控制的角度上：

同樣展開時針的屬性，拉動橡皮筋關聯到分針的旋轉屬性上：

由於分針旋轉360度，時針只走了1個小時，所以需要在時針的關聯分針的表示式基礎上除以12，這樣時針和分針的關聯表示式就做好了：

再做數字100的動畫吧，先用錨點工具去調整數字100這個圖層的錨點位置：

再使用相同的字型大小等輸入數字100，注意，對齊方式一定要是右對齊：

同樣的方式用橡皮筋將兩個數字的位置進行關聯，這樣就不用手動的去做位置上的修改了：

再給控制器新增效果-表示式控制-滑塊控制：

把源文字關聯到滑塊控制，這樣就可以用滑塊控制來定義數字了：

接著再來K控制器上的關鍵幀就可以了，這一步不用說了吧：

但這個時候你又會發現一個問題，數字會出現小數點，這是由於我們的滑塊控制的變數只有1到100，但是我們的總幀數有250幀導致的：

要解決這個問題，第一種方法是讓滑塊控制的關鍵幀只在0到100幀，第二種方法就是需要用到一個數字取整的表示式。

我們把源文本里的表示式刪除，點右邊小三角新增JavaScript Math-Math。round（value）：

選中表達式中的value，再用橡皮筋關聯到滑塊控制，這樣就不會出現小數點：

電量圖層X軸縮放動畫不用說吧，K幀之前記得先調整圖層的錨點就好：

同時可以給電量圖層新增效果-生成-填充：

透過K顏色幀，讓百分數從21到20的時候變成紅色：

中心點這個圖層我添加了一個圖層樣式投影，同樣新增之前調整錨點的位置：

再來弄弄指紋的動畫吧，選中圖層以後滑鼠右鍵選擇從向量圖層建立形狀，當然也是要先調整錨點的位置：

這樣指紋圖層就會轉為路徑，然後新增修剪路徑：

再透過去K修剪路徑上的結束數值來控制指紋的生長：

康秋D複製一份指紋圖層，然後在開始的數值上也K一下幀，做出指紋出現又消散的感覺：

給這個圖層新增效果-生成-勾畫：

然後透過勾畫裡的引數調整來讓指紋有點光的感覺，我個人覺得這裡會比直接填充顏色要好一些：

可以再新增一個效果-風格化-發光：

發光的引數大家就看著辦吧，我這裡也弄的不是很好：

至於調整各個部分出現的時間等我這裡就不贅述啦，慢慢調透明度以及縮放就好了，今天的內容已經60張圖啦：

最後匯出動圖看看效果吧：

大概是那個意思吧，好啦，今天的分享就到這裡，想要影片版，原始檔的童鞋後臺

撩我

獲取吧！

更多內容歡迎關注公眾號：

本文由“野鹿志”釋出

轉載前請聯絡馬鹿野郎

私轉必究