AE基础教程-支付完成动效

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-禁止演绎
3389 3 35 2019-11-03

上周分享了火箭教程之后,不少小伙伴留言觉得教程太难了,太复杂了,所以我们打算出先一些比较基础的教程。


后期会慢慢再增加一些入门的AE教程,从0开始的,帮助大家快速的可以学习认识AE。


包括一些功能性的讲解,AE中的实用小技巧,迪斯尼的动画十二黄金法则在UI动效中的应用,以及AE中的速度曲线在实际中的应用。


先来看下本期的教程吧,最终效果如下,是一个支付成功的动效




我们可以通过AE中「修建路径」「位置」「缩放」这三个属性,来实现以上的效果。


以下是视频教程



整个动画大概有3个状态。


1、是在等待的状态;

2、是支付完成绿色线条填充完覆盖灰色;

3、是后面的线条细节弹出。





我们可以点开图层,在「添加」里面找到「修剪路径」





修剪路径里面有3个属性,可以控制我们的线条,分别是「开始」「结束」「偏移」





以下是绿色线条的关键帧位置以及速度曲线,具体细节操作可参考视频





以下是对勾的关键帧位置以及速度曲线,具体细节操作可参考视频





新建一个调整图层,将圆形描边,关联到调整图层,并通过调整「调整图层」的「缩放」属性来统一调整整个圆的缩小与放大。






通过调整「位置」「缩放」「修建路径」调整出背景的出现消失的效果





调整后后面的线条细节之后,勾选上运动模糊




细节调整完之后就完成啦。





点个赞在走吧!关注我们,不迷路




Powered by Froala Editor

全部评论:3

  • 木兰O

    2021-05-13 18:01

    描边的线条,怎么改变前后是圆角的呀

  • 爱设计的小李

    2021-01-20 22:47

    请问为什么我导入的ai源文件里面的圆路径,在ae里面会出现两条路径,类似创建轮廓那种

  • 像素有毒

    2019-11-04 09:33

    关注微信公众号「像素有毒」可获取文中的案例的AE工程源文件

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

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

投票