恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

支付宝集五的福动效怎么做

原创文章 分类: 教程 版权: 举报
758 20 11 2
2020-05-17
6.9


前言


每年支付宝的集五福活动都能吸引亿万用户的参与,其运营活动无论是视觉、动效还是交互都是十分出色的,也值得每一位设计师借鉴学习。今天给大家带来的是关于支付宝集五福动效的制作教程,我也会附上所有集五福的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


Powered by Froala Editor

邻居家的小明

今天你做了别人不想做的,明天你就能做别人不能做的

123粉丝/65关注

收藏家lv.3叫兽勤学标兵lv.1原创达人
金融图标60枚UI设计基本准则

邻居家的小明

邻居家的小明

今天你做了别人不想做的,明天你就能做别人不能做的

收藏家lv.3叫兽勤学标兵lv.1原创达人

你确定要举报支付宝集五的福动效怎么做

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年05月17日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录
//

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN