今年春节小米商城为了体现节日的热闹和喜庆，首页头图采用了动画效果，本篇文章会给大家详细讲解动画的设计。先看图，后讲解，头图的主视觉设计出自我们团队的美女设计师可萌之手。
案例中主要讲解星光扩散和烟花的设计，以及如何导出合适的大小的GIF图。用到的软件是AE+PS，星光扩散和烟花都使用了AE插件Particular，钱袋的绳子飘动使用了，人偶控制点工具。
Particular是AE的第三方插件，需要先安装插件。打开AE新建所需的尺寸合成，然后新建纯色图层，在效果和预设搜索栏中搜索Particular，赋予刚新建的纯色图层。
在效果栏中调整几个关键的参数，调整粒子每秒的发射数量、粒子生命、粒子大小、粒子类型选择发光球体，粒子颜色等，具体根据想要的效果而定。
因为我们最终要导出一个GIF图，所以循环播放不能有卡顿，如何做，非常简单，看下图。
复制一个效果图层，如上图保证两个图层的首尾画面一致，然后分别给两个图层加透明度关键帧，一个100%-0，一个0—100%，这样最终循环播放画面就是一致的。
烟花效果同样使用Particular，在插件中有个“发射行为”功能，选择“爆炸”选项，这样粒子是以爆炸的形式出现，恰好模拟烟火的效果。
接下来是最关键的调节，把爆炸的点变成线，下拉找到“辅助系统”，改为“连接”，然后调节粒子数量，调节粒子的生命值，模拟烟火扩散和消失的效果。
用到了AE自带的“人偶控制点工具”给绳子标记控制点，然后移动相应控制的位置做出飘动的效果，这个功能特点是，它可以让一个物体局部移动。
GIF格式虽然好用，但有时候总会很大，比如上图使用PS导出GIF的大小大概是15M多，显然是不能用的，很多压缩的软件也不能压缩到合适的大小。
下面分享一个我导出的一个小技巧，在导出弹窗中，有一个“损耗”选项，可以调节数值达到想到的大小，但损耗数值也不能太高，图片会模糊不能用。
同样的图我就调节了一个数值，就降到了3点几兆，着实给力，清晰度还不错。
另外，在设计动画的时候，可以降低帧速率也可以降低GIF的大小，这个也是我常用的办法。
Particular粒子插件是动画设计中非常常用的工具，所以UI设计师有必要去学习一下，它的强大远不止如此。先点个“在看”，然后带你进设计群，公众号后台回复“1”即可，我等你
優(yōu)網(wǎng)科技，優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、DIY體驗、720全景展廳及3D虛擬仿真）、移動端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）、微信小程序定制開發(fā)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
