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