动效设计教程

前言

今年春节小米商城为了体现节日的热闹和喜庆，首页头图采用了动画效果，本篇文章会给大家详细讲解动画的设计。

先看图，后讲解，头图的主视觉设计出自我们团队的美女设计师可萌之手。

案例解析

案例中主要讲解星光扩散和烟花的设计，以及如何导出合适的大小的GIF图。

用到的软件是AE+PS，星光扩散和烟花都使用了AE插件Particular，钱袋的绳子飘动使用了，人偶控制点工具。

Particular是AE的第三方插件，需要先安装插件。

星光扩散效果

打开AE新建所需的尺寸合成，然后新建纯色图层，在效果和预设搜索栏中搜索Particular，赋予刚新建的纯色图层。

在效果栏中调整几个关键的参数，调整粒子每秒的发射数量、粒子生命、粒子大小、粒子类型选择发光球体，粒子颜色等，具体根据想要的效果而定。

如何让星光扩散循环播放？

因为我们最终要导出一个GIF图，所以循环播放不能有卡顿，如何做，非常简单，看下图。

复制一个效果图层，如上图保证两个图层的首尾画面一致，然后分别给两个图层加透明度关键帧，一个100%-0，一个0—100%，这样最终循环播放画面就是一致的。

烟花效果

烟花效果同样使用Particular，在插件中有个“发射行为”功能，选择“爆炸”选项，这样粒子是以爆炸的形式出现，恰好模拟烟火的效果。

接下来是最关键的调节，把爆炸的点变成线，下拉找到“辅助系统”，改为“连接”，然后调节粒子数量，调节粒子的生命值，模拟烟火扩散和消失的效果。

钱袋绳子飘动效果

用到了AE自带的“人偶控制点工具”给绳子标记控制点，然后移动相应控制的位置做出飘动的效果，这个功能特点是，它可以让一个物体局部移动。

导出GIF

GIF格式虽然好用，但有时候总会很大，比如上图使用PS导出GIF的大小大概是15M多，显然是不能用的，很多压缩的软件也不能压缩到合适的大小。

下面分享一个我导出的一个小技巧，在导出弹窗中，有一个“损耗”选项，可以调节数值达到想到的大小，但损耗数值也不能太高，图片会模糊不能用。

同样的图我就调节了一个数值，就降到了3点几兆，着实给力，清晰度还不错。

另外，在设计动画的时候，可以降低帧速率也可以降低GIF的大小，这个也是我常用的办法。

最后

Particular粒子插件是动画设计中非常常用的工具，所以UI设计师有必要去学习一下，它的强大远不止如此。

获取粒子插件关注我的微信公众号“互联网设计帮”，后台回复“粒子”。中文汉化支持Mac、Win

新的一年大家加油！

Powered by Froala Editor