AI和AE制作点击动效&刷新动效

版权申明:本文出自“韶华流逝”原创,感谢“韶华流逝”的原创教程分享!

制作工具:AI(Illustrator)、AE
效果适用场景:App、小程序、网页等一些其他的场景

这期的插件可以使UI做的AE动画直接导出Josn文件供开发使用(自写的插件安装教程,你们可以下载安装试试看哦)!超级便利!

如果有没有看懂的,大家可以留言,我再给大家解答

给大家的话:设计是个需要耐心的客人,要好好的服侍!

老规矩:先上动效图,(手指人的动图导出的GIF有红色的边,,有点奇怪)

AI和AE制作点击动效&刷新动效

 

AI和AE制作点击动效&刷新动效

今天就来个手指人的刷新动效!金币点击的动效,你们可以自己尝试一下,我会把源文件放在里面;开整:

  1. 先新建画布(画布随意),在AI里面把所需的元素画好。眼睛可以用路径描边或者布尔运算来实现,其他的就是一些圆角矩形和圆形堆叠而成的,没什么难度!

AI和AE制作点击动效&刷新动效

2.接下来就是把AI文件导入AE里面;这里要注意、注意、再注意,这几步的操作超级重要

·打开AI文件的图层界面,打击可以看到所有图层全部置于在一个层里面的,现在执行”释放到图层顺序”,然后每个图层前面的颜色都是五颜六色的了,那就成功了

·释放完毕啊之后把里面的所有图层拖到顶层,然后把每个图层命名一下,不然等会放到AE里面你都找不到

AI和AE制作点击动效&刷新动效现在打开AE

·新建500*500的画布,时间调整为两秒(00:02:00);要是新建成功后,想再次更改画布的属性以及时间,可用Ctrl+K即再次调整

.右击项目栏中的素材一栏的空白处,导入单个文件或者点击顶部的文件按钮——导入文件即可;

·导入文件的时候选择导入为——合成-保持图层大小(这一步很重要,不然导进去就是一个图层文件)

AI和AE制作点击动效&刷新动效

 

3.现在我们已经成功的把AI文件导入AE了,大家可以先观察一下手指人的动效,眼睛、嘴巴以及头部都在动,那我们是不是可以分别建三个合成把着三部分的动效分别做完,最后再放到一个合成里面呢?答案是可以的!!!

·那我们先来做眼睛的合成,新建一个200*200的合成;下面就是把张开的眼睛文件和闭合眼睛的文件拖入到眼睛合成里面,右击把矢量文件创建-从矢量图层创建形状,变为形状之后就可以做一些复杂的动画,拖拽路径产生的一些动画(这一步如果不做的话,当你更改AI文件的时候这里面的东西是会跟着变化的)

AI和AE制作点击动效&刷新动效

先理一理眼睛的动画逻辑,睁眼——闭眼——睁眼——闭眼——睁眼——笑;

现在我们动手来做一下:眼睛有个闭合的效果(时常三帧),可以先把眼睛进行缩放处理,第一帧100%,第三帧70%,感觉像是闭眼

AI和AE制作点击动效&刷新动效

下一个就是闭眼的图层(时常三帧),新建一个形状图层画一个圆角矩形,不做任何处理

AI和AE制作点击动效&刷新动效

上面两个就是睁眼闭眼,再选中两个图层执行CTRL+d进行复制,再衔接时间节点,最后再把眨眼的图层衔接上就好了;大家注意观察下面的时间轴和上方的图形变化;就像下面一样

AI和AE制作点击动效&刷新动效

 

4,下面我们再来处理一下嘴巴,舔舌头的效果,一样的,新建一个200*200的合成画布,把嘴巴和舌头放到里面,分别创建形状;

我们再想想舌头的动画逻辑:伸舌头——舔嘴唇——收回去

那我们来动手做一下,先给舌头加个蒙版(小心舌头出戏),然后就是处理舌头的位置和旋转的角度,舌头的移动中心点调到嘴的中心(想想自己的舌头,我可是舔了好久的舌头)

AI和AE制作点击动效&刷新动效AI和AE制作点击动效&刷新动效

5.舌头处理好了,那我们回到总的合成里面,,分别把舌头的合成和眼睛合成放到里面,ctrl+d复制一个眼睛合成旋转180°就是一对眼睛了,接下来就是处理头部;

我们来理一下头部的动画逻辑:头伸出——变大(”膨”出气泡)——缩小——伸长——再还原;

我们对这个形状的路劲进行处理,如下:打了五个关键帧

AI和AE制作点击动效&刷新动效

 

6.最后就是气泡了,这个超级简单,我们只需做好一个动画复制再更改颜色即可

具体步骤:第一列帧(位置)——第二列帧(位置变化、缩放、不透明度)——第三列(位置变化、进行缩小、不透明度变为0)

AI和AE制作点击动效&刷新动效

最后复制多个形状图层,更改位置、颜色以及大小,再把时间轴错开即可,效果如下:AI和AE制作点击动效&刷新动效

总结:

  1. AI做完矢量图的时候注意要把每个图层分开(操作步骤:执行”释放到图层顺序”,释放完毕啊之后把里面的所有图层拖到顶层,然后把每个图层命名一下)
  2. 到如AE的时候要选择保持图层大小,不然导进去就只有一张图
  3. 做动画的时候先分析每个动作,能分开分开做成不同的合成,最后再放到整个合成里
  4. 做动画要考虑到动画的韵律,感觉过渡生硬的时候可以多多参考别人的作品再来
  5. 心态,心态,心态很重要,不要半途而废,加油!

AI和AE制作点击动效&刷新动效

最后就是插件的运用了

AI和AE制作点击动效&刷新动效到Bodymovin的GitHub首页(链接: bodymovin/bodymovin )克隆项目到本地,或者下载.zip包。

AI和AE制作点击动效&刷新动效.rar

觉得不错就点个赞把!

 

特别说明:本站所有资源仅供学习与参考,资源是免费分享的,标价是整理费。请勿用于商业用途,如有侵犯您的版权,请及时发邮件联系我们(243574967@qq.com),我们将尽快处理。

觉得文章有用就支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

分享到:
赞(0) 赞赏支持

说点什么抢沙发

//整站变灰色