到這一步準(zhǔn)備工作基本完畢，還有一個(gè)圓圈我們邊做邊說(shuō)。

堅(jiān)持到這一步的同學(xué)要恭喜你們了，因?yàn)橐�開(kāi)始嘗鮮了~雖然說(shuō)這個(gè)動(dòng)畫(huà)不長(zhǎng)，但是也是由不少的關(guān)鍵幀組接起來(lái)的，文字教程沒(méi)有辦法一個(gè)幀一個(gè)幀的講解，所以我主要講方法，如何開(kāi)始以及轉(zhuǎn)折部分該怎么辦，怎么樣去分析，方法學(xué)會(huì)了觸類旁通。當(dāng)然我也會(huì)盡可能的講的細(xì)致，謝謝!

1. 通過(guò)觀察可以知道，剛開(kāi)始有一個(gè)點(diǎn)擊的動(dòng)作，這一步我的思路是復(fù)制一層我們的圓角矩形，然后把復(fù)制的這一層填充#FAFAFA，點(diǎn)擊的感覺(jué)在這里涉及到大小、圓度、不透明度變化。注意開(kāi)始到結(jié)束數(shù)值的變化。(不透明的最后一幀調(diào)為0)

2. 下一步要用到藍(lán)色圓圈，所以我們先來(lái)準(zhǔn)備圓圈。在不選中任何圖層的情況下直接畫(huà)圓，大小合適即可，不要填充只要描邊，描邊顏色為#22A7C2，粗細(xì)6px。注意居中，如果沒(méi)有居中可以在窗口-對(duì)齊，也可以摁Ctrl+Alt+Home居中錨點(diǎn)。

接下來(lái)讓它旋轉(zhuǎn)，類似loading，在本圖層下拉三角中找到內(nèi)容-橢圓-描邊-線段端點(diǎn)-圓頭端點(diǎn)。然后打開(kāi)添加選中-修剪路徑。

在修剪路徑中打關(guān)鍵幀保持個(gè)缺口。

然后摁下R調(diào)出旋轉(zhuǎn)屬性，設(shè)置一個(gè)初始的旋轉(zhuǎn)角度，打關(guān)鍵幀，然后你想讓它旋轉(zhuǎn)到幾秒鐘就在那里打上關(guān)鍵幀即可，當(dāng)然也要同時(shí)修改旋轉(zhuǎn)的最終角度。然后播放一下試試?

3. 點(diǎn)擊過(guò)后，緊接著就是一個(gè)箭頭和圓圈的交替以及圓角矩形到圓的變化。

① 箭頭涉及到一個(gè)旋轉(zhuǎn)以及透明度的變化。

② 圓圈涉及到大小和透明度變化。

③ 圓角矩形只有一個(gè)大小變化。

4. 適當(dāng)?shù)霓D(zhuǎn)兩圈，接下來(lái)就是由圓圈轉(zhuǎn)化到感嘆號(hào)了。幾乎是四個(gè)動(dòng)作同時(shí)進(jìn)行。

① 圓圈在旋轉(zhuǎn)的過(guò)程中縮小，透明度降低至最低。

② 感嘆號(hào)是一個(gè)旋轉(zhuǎn)和透明度由低到高。

③ 白色色塊顏色轉(zhuǎn)變?yōu)榧t色。

④ 轉(zhuǎn)化為紅色后和感嘆號(hào)一起的晃動(dòng)。

接下來(lái)將上一步中的①②③反過(guò)來(lái)就可以做到接下來(lái)的效果~