教程之前先推薦下我的個人網站：https://uijiaohu.com/，里面記錄了自己平時工作遇到的問題，所以如果你是剛入門的小伙伴希望能幫助到你。

菊花loading到處可見，可當web前端跟我說需要一個這樣的gif，看著簡單（其實后面做起來也很簡單哈哈哈），網上搜了一輪，卻沒有詳細教程。后面搜到了【切換定格關鍵幀】的知識點，才給整了出來。一開始也做了帶半透明的，ps導出gif的時候我是真的難受~~特發(fā)此教程，希望自己對知識點更加深刻，也希望幫助到入門UI動效的小伙伴~有什么不對之處，請幫忙指正~

1、先在ai里畫好小菊花，我這里做的尺寸是300px x 300px。這里特別強調所有的顏色都不要用帶有半透明的，請用改變B（亮度）的形式來實現(xiàn)顏色的深淺過度【因為后面要用ps導出成gif，gif不識別半透明，我踩過的坑請你們繞過去~】

2、打開ae，cmd+n新建一個300px的合成，具體的參數(shù)如圖。

3、導入ai文件，具體操作以及選項看截圖~

4、選中ai文件->右鍵->創(chuàng)建->從矢量圖層創(chuàng)建形狀 （這一步也挺關鍵的，轉為形狀之后導出來的mov比不轉的，邊緣會清晰沒有白色噪點，在這里先給截圖對比吧~）

5、選中上面那個輪廓圖層，（K關鍵幀之前要確保錨點在圓的中心位置）快捷鍵R調出旋轉，每隔3幀K一個關鍵幀（0度、30度、60度、90度...以此類推到360度，剛好轉一圈）

6、選中所有關鍵幀->右鍵->切換定格關鍵幀

關鍵幀變了個樣子，注意箭頭那個滑動的條條，拖到你做的最后的關鍵幀的位置。這就是你渲染出來的時間

7、添加到渲染隊列，把文件導出成透明背景，一定要選擇RGB+Alpha通道。

8、打開ps，文件->導入->視頻幀到圖層

9、文件->導出->存儲為web格式，其他設置看截圖，導出就好了。