动效教程 | 5 分钟快速制作弹跳加...

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
18579 28 441 2020-07-03

哈喽,各位UI中国的小伙伴,好久木有在这边分享动效相关的教程啦,上次发作品还是2018年,时隔多年终于想起了账号跟密码~~~




前言


今天墨染哥教你如何使用AE 5分钟快速制作一个弹跳的加载小动画,如下图所示,这个小动画要快速做出来,需要解决解决两个技术难点,第一个是食物图标的弹跳,第二个是文本的弹跳。






食物图标的弹跳



话不多说,先看看食物图标的弹跳怎么做,可以看到其实就是一个简单的位移动画,难的地方是节奏的调整。


详细思路如下:



1、将食物图标做一个预合成,依次排列,一个图标只出现一秒钟。(这样做预合成的目的是减少K帧,等下我们可以给整个预合成做位移动画即可。)



2、现在给整个图标的预合成做上下运动的动画,直接K位置关键帧即可。




默认效果是下图这样子的。



有木有觉得很僵硬?这是因为没有调节动效节奏的问题,正常的弹跳应该是落下的时候加速,弹起的时候减速。



3、此时我们要调节关键帧的节奏了,看好了,这里有个进阶小技巧。选中这些在顶点位置的关键帧,然后 Alt + 鼠标左键双击关键帧,弹出关键帧速度调节窗口,将速度调为0,影响为80,即可快速做出弹跳动画。




调节完节奏之后,是不是看起来舒服多了? 




4、给预合成加一个旋转动画。




So,图标的弹跳动画就搞定了。




文本的弹跳



1、这里先敲上一段文本。然后开启对称网格、网格( 在AE内绘制图形时,开启这两个选项绘制的图形会更加精准,也更方便绘制哦 )。




2、选中文本图层,用钢笔工具绘制一条蒙版路径,并使用钢笔工具的的添加锚点工具,在蒙版路径中间的位置上加多一个锚点,并拉出控制手柄,方便等下调节路径做动画。




3、展开文本属性,在路径选项里面,选择刚刚绘制的蒙版路径。




4、根据图标弹跳的节奏,给蒙版路径K帧,调节向上向下弯曲,做成弹跳的文本。

做完一个弹跳之后,可以复制关键帧到下一个位置即可。




文本动画最终效果如下:



有木有很Q弹的感觉? 弹弹弹,弹走鱼尾纹~



加上图标的弹跳动画,最终效果如下:




好了,最后,我们再整体包装一下,一个简单的加载动画作品就诞生了~~




最后


好了,这个小教程到这里就结束啦,希望可以帮到你,喜欢的话,来个一键三连。欢迎大家做完练习私聊我,发我看看做的效果哦~~


最后,附上我的源文件一份,有需要的可以直接在UI中国这里下载哦~~  


点赞破100,我们下一个教程见~~~ 


作者:墨染ART

本文由 @墨染ART 原创发布。未经许可,禁止转载。

原文:http://dwz.date/bquY



Powered by Froala Editor

全部评论:28

  • 半仙哥

    2020-11-21 20:24

    @墨染ART: 这种白piao党,就不用理他,又想蹭教程,又找各种理由不爽做教程的人

  • 芒果的芒

    2020-09-07 09:40

    @醉友与猫九: 阿哈哈哈哈

  • 执̥࿐

    2020-09-03 17:32

    @ciooo: 咱们导出json文件之后给了前端,前端要是不会怎么办哇,咱们要怎么说,大佬

  • Ringo

    2020-09-03 15:01

    为什么第三步的时候食物是在顶部切换,第四步变成在底部切换

  • 醉友与猫九

    2020-08-30 13:54

    @芒果的芒: 兄台你的头像好魔性哈哈哈哈

  • 墨染ART

    2020-08-20 15:50

    @peakey: 嗯 预合成可以减少关键帧

  • 墨染ART

    2020-08-20 15:49

    @哎呀西瓜: 导出PNG序列试试

  • 哎呀西瓜

    2020-08-12 16:52

    照着做出来了,但是不会保存,保存后的AVI格式视频中间一部分不显示

  • peakey

    2020-08-11 16:21

    @peakey: 以前看到这种动效一直以为的一个图标接一个图标手K的,没想到还可以用预合成的方法,学到了

  • peakey

    2020-08-11 16:10

    大佬太强了!

  • 墨染ART

    2020-07-27 19:41

    @: 不好意思,我只在我自己的公众号发货软文,其他地方我还没发过,不知道你所谓的很多地方看到软文从何而来,想必也是别人愿意主动分享出去。这个教程每一步都截图,配文字说明了为什么要这么做,不知道还保留了什么?我之前也出过一些视频版的教程,各种形式都有利弊。抱歉浪费了你宝贵的10分钟,下次直接点击关闭就好。

  • 2020-07-27 11:29

    说实话在很多地方看过你的推广软文,每个人都需要生存。读者表示理解。可是“免费”的教程,也变相反映了收费课程的质量。因为免费的“压缩”版内容,都看不懂,想必收费的课程应该质量也不高。主要想表达的意思就是:如果真心想出教程,请认真对待,不要精简过程,对于新手党理解难度很大,对于有经验的来讲,跟本不care你的这种初级教程。不清楚你的目标用户人群到底是谁,B站很多教程,也是免费的,我会因为免费的教程而进阶去选择收费的教程,因为免费的我听得懂,授课者没有保留,有考虑到各种情况给初级者。创业者,初期是不能只考虑赚钱的,当然没钱无法生存,一味考虑收费,又丢了体验。讲真这种初级教程真的很不走心,这种初级的教程保留这么多,想必授课者懂得也并不多。话有点苛刻,看你怎么理解客户需求了。毕竟我也写了这么多字,也浪费了10多分钟

  • ciooo

    2020-07-22 18:07

    @执̥࿐: 可以下载插件bodymovin,可以导出json文件

  • 消除某种情绪

    2020-07-14 17:50

    脑子:会了 手:????

  • 墨染ART

    2020-07-09 18:29

    @小橘子啊: 你可以换图标,学会思路就对了

  • 小橘子啊

    2020-07-09 17:40

    各种文本动效和图标动效对不上啊大佬,看起来就是很违和

  • 墨染ART

    2020-07-08 19:25

    @Leki: 2018版本的Ae

  • Leki

    2020-07-08 14:16

    用的什么版本做的?为什么提示错误?打不开源文件

  • 黑白天堂

    2020-07-07 17:15

    收藏了也不会去练系列+1

  • 墨染ART

    2020-07-07 15:43

    @执̥࿐: 小程序就PNG雪碧图吧

  • 执̥࿐

    2020-07-07 15:13

    大神,这要是给前端是要导出什么格式?小程序可以加这样的动画吗?

  • DOMOHAHA

    2020-07-07 09:49

    终于再次等到墨老师,更厉害啦!!

  • 墨染ART

    2020-07-06 17:16

    @波波BobbyHe:

  • 芒果的芒

    2020-07-06 11:48

    第100个赞打卡

  • 波波BobbyHe

    2020-07-06 09:04

    大佬忘记密码都是借口,可以手机号重置密码

  • 楚-

    2020-07-06 09:04

    还没说要导出什么格式给开发呢?

  • 风__

    2020-07-06 09:02

  • 147***5149

    2020-07-06 08:20

    @墨染ART: 6666

  • 老狗

    2020-07-03 21:59

    @墨染ART: 兄弟们啊 点赞啊

  • 今天也是不想上班的一天

    2020-07-03 17:46

    教程思路很清晰,很容易上手~

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

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

投票