Warning: Use of undefined constant HTTP_USER_AGENT - assumed 'HTTP_USER_AGENT' (this will throw an Error in a future version of PHP) in /www/wwwroot/www.uitu.top/zwp-vkvtt on line 1
AE基础教程-支付完成动效-UI图设计网

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

首先来说说为什么学习AE吧,AE是一款 款图形视频处理软件,在UI设计起起的作用主要是用来做交互动效的,那什么是交互动效呢?

就是让用户更加爽、更加爽的用你的产品(App、网页、软件、智能硬件端等等)。动效设计由于可以将本来静态的图片、或者抽象的动态效果的很容以表达出来,所以,UI设计师除了必要的交互动效,通常为了表达抽象的交互体验设计制作动效设计稿,这样开发团队也能对即将开发的产品都有一个直观的认知。

学好AE可以让程序员那边更好的理解你想要的动态效果 ,达到一个高质量产品的开发。当然简单的动效下载也可以用其他软件去实现。今天主要分享一下AE的动态制作方法

今天分享的是支付完成的一个动效的制作教程。

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

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

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

  • 1、是在等待的状态;
  • 2、是支付完成绿色线条填充完覆盖灰色;
  • 3、是后面的线条细节弹出。

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


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


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


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


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


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


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


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

好了教程结束了,是不是很简单呢,赶紧动手操练起来吧,不然就是一看就会,一做就错呢。

1.本站所有素材均可免费下载
2.本站所有素材仅限个人学习研究使用,请勿商业使用
3.本站所有素材版权均归上传者所有,如需商业使用请先与版权所有人联系
4.如果你觉得本站不错记得收藏及分享
UI图设计网 » AE基础教程-支付完成动效

发表评论

提供最优质的素材集合

立即查看 了解详情