AE制作菊花loading

教程之前先推荐下我的个人网站：https://uijiaohu.com/，里面记录了自己平时工作遇到的问题，所以如果你是刚入门的小伙伴希望能帮助到你。

菊花loading到处可见，可当web前端跟我说需要一个这样的gif，看着简单（其实后面做起来也很简单哈哈哈），网上搜了一轮，却没有详细教程。后面搜到了【切换定格关键帧】的知识点，才给整了出来。一开始也做了带半透明的，ps导出gif的时候我是真的难受~~特发此教程，希望自己对知识点更加深刻，也希望帮助到入门UI动效的小伙伴~有什么不对之处，请帮忙指正~

1、先在ai里画好小菊花，我这里做的尺寸是300px x 300px。这里特别强调所有的颜色都不要用带有半透明的，请用改变B（亮度）的形式来实现颜色的深浅过度【因为后面要用ps导出成gif，gif不识别半透明，我踩过的坑请你们绕过去~】

2、打开ae，cmd+n新建一个300px的合成，具体的参数如图。

3、导入ai文件，具体操作以及选项看截图~

4、选中ai文件->右键->创建->从矢量图层创建形状 （这一步也挺关键的，转为形状之后导出来的mov比不转的，边缘会清晰没有白色噪点，在这里先给截图对比吧~）

5、选中上面那个轮廓图层，（K关键帧之前要确保锚点在圆的中心位置）快捷键R调出旋转，每隔3帧K一个关键帧（0度、30度、60度、90度...以此类推到360度，刚好转一圈）

6、选中所有关键帧->右键->切换定格关键帧

关键帧变了个样子，注意箭头那个滑动的条条，拖到你做的最后的关键帧的位置。这就是你渲染出来的时间

7、添加到渲染队列，把文件导出成透明背景，一定要选择RGB+Alpha通道。

8、打开ps，文件->导入->视频帧到图层

9、文件->导出->存储为web格式，其他设置看截图，导出就好了。