提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
每年支付宝的集五福活动都能吸引亿万用户的参与,其运营活动无论是视觉、动效还是交互都是十分出色的,也值得每一位设计师借鉴学习。今天给大家带来的是关于支付宝集五福动效的制作教程,我也会附上所有集五福的AE源文件以便大家学习,希望对各位有所帮助。
我们先看一下2019年集五福的页面动效
对于没有接触过运营动效的设计师来说,即使熟悉AE,可能也会有点无从下手,相比软件操作,最关键其实的是设计思路,因为以上所有的界面动效其实都只用到AE最基本的属性,可以说只要你会AE的基本操作,完成以上的动效在软件操作上是完全没问题的。
动效主要用到的AE软件4个基本属性:【位移】、【旋转】、【缩放】、【透明度】
这几个动效当中,「五福合成」是最复杂的,这个搞定了其他也就没问题了,所以今天我就来分享一下这个动效是怎么做!
为了方便动效细节的梳理,我将五福合成的动效分为了「基本画面动效」和「光效烟花动效」
这部分动效的实现都只是将AE的基本属性进行复合,这里将其中的两个动画进行的分解,其余的动画也都是如此
需要注意的是,这里最难的不是软件的使用,而是如何保证动效达到一个最佳的状态,画面流畅有节奏,而这些只能通过不断的练习,对于初学者可以通过逐帧观察来进行学习。
首先需要提前将使用到的光线绘制出来(也可以上网找素材)
准备好素材后,接下来就是通过AE基本属性让它们动起来
最后还有光效粒子和烟花效果,二者都是通过单个图形的位移和缩放,再进行复制叠加合成
将前面所有的动画进行合成就实现了「五福合成」完整的动效了!是不是没有想象的那么难。
整个动效制作会用到两个插件(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
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册