前言

每年支付宝的集五福活动都能吸引亿万用户的参与，其运营活动无论是视觉、动效还是交互都是十分出色的，也值得每一位设计师借鉴学习。今天给大家带来的是关于支付宝集五福动效的制作教程，我也会附上所有集五福的AE源文件以便大家学习，希望对各位有所帮助。

 

我们先看一下2019年集五福的页面动效

对于没有接触过运营动效的设计师来说，即使熟悉AE，可能也会有点无从下手，相比软件操作，最关键其实的是设计思路，因为以上所有的界面动效其实都只用到AE最基本的属性，可以说只要你会AE的基本操作，完成以上的动效在软件操作上是完全没问题的。

 

动效主要用到的AE软件4个基本属性：【位移】、【旋转】、【缩放】、【透明度】

这几个动效当中，「五福合成」是最复杂的，这个搞定了其他也就没问题了，所以今天我就来分享一下这个动效是怎么做！

五福合成动效怎么做？

为了方便动效细节的梳理，我将五福合成的动效分为了「基本画面动效」和「光效烟花动效」

基本画面动效

这部分动效的实现都只是将AE的基本属性进行复合，这里将其中的两个动画进行的分解，其余的动画也都是如此

需要注意的是，这里最难的不是软件的使用，而是如何保证动效达到一个最佳的状态，画面流畅有节奏，而这些只能通过不断的练习，对于初学者可以通过逐帧观察来进行学习。

光效烟花动效

首先需要提前将使用到的光线绘制出来（也可以上网找素材）

准备好素材后，接下来就是通过AE基本属性让它们动起来

最后还有光效粒子和烟花效果，二者都是通过单个图形的位移和缩放，再进行复制叠加合成

将前面所有的动画进行合成就实现了「五福合成」完整的动效了！是不是没有想象的那么难。

PS

整个动效制作会用到两个插件（AEUX和Motion2），AEUX是用于将Sketch的图层导入AE；Motion2是专门调整运动的插件，动效中弹窗弹出后的抖动效果就是用Motion2完成的。

 

AEUX使用说明及下载地址：

https://www.ui.cn/detail/443316.html

Motion2使用说明及下载地址：

https://www.bilibili.com/video/BV1at41137mC?from=search&seid=3709773122746194019

 

动效的导出会用到Bodymovin这个插件，该插件可以将动效以代码的形式导出，极大的保证开发实现效果。

Bodymovin使用说明及下载地址：

https://cloud.tencent.com/developer/news/200585