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