赞助商
立即赞助

只会用缓动?五分钟让你学会AE动画曲线!

UI设计3年前 (2021)更新 流光
22.3K 0 0

AE 画只会“缓”曲线?流利说的专画师哥你如何把握好动画节奏

导言

本文关于动画曲线探究,将从为什么探究动画运动曲线、如何在 AE 调动画曲线、动画曲线结和应用、曲线应用实例几个展开。

为什么会有这篇分享?

发现大家很多时候都没调动画曲线习惯;于曲线认识留在“F9”打个缓动(在用 AE 制作动画时),会感觉自己动画怎么做不了那样生动又自然;

一动画好不好,动画节奏至关重,动画运动曲线就用控制动画节奏的具,部分设软件都会提供调节运动曲线的具。包括但不限于 AE、Pr、C4D、Spine 。

我们可先看较好的画节奏是么样:

只会用缓动?五分钟让你学会AE动画曲线!

△ Flatwhite 平白工作室

由在节动画曲的时,关键帧常常生一变化,所以我们以先从关键帧开始说:

关键帧

在节动画曲的时,时间轴上的关键帧有不同的形状,所以理不同的形状代表的意义以反向理动画曲;

只会用缓动?五分钟让你学会AE动画曲线!

  • 菱形:表关键帧直接动画的速度匀速
  • 漏斗:两键帧速由零到快又到零
  • 箭头:速度到个关键帧缓缓变为零
  • 圆形:是指三个关键帧中间那个为圆形的话会将这三个关键帧形成的段不同速度进行柔缓
  • 正形:定格关键帧,需要设冻结画时时候会用到
  • 凸三角:一半线性,一半格
  • 凹角:一半是缓,一半是定格

曲线的种类

速度曲线(v-t):速度曲线是表现时与速度关系曲线,我们可以过曲线“舒缓度”观看到和调节动画节奏,曲线越舒缓速度越慢,越陡峭越快;

只会用缓动?五分钟让你学会AE动画曲线!

值曲线(s-t):值曲线又叫做路程曲线,即路程与时关系曲线,曲线切线率越大速度越快,率越小速度越慢;

只会用缓动?五分钟让你学会AE动画曲线!

速度曲线和值曲线关系和理解,B 站等平台有很多主都做了详尽解释,由于本文心是在曲线应用上,所以不过多展开。

由于平时我们动画的主具 AE, AE 中我们多数动画师习惯用速度曲线,所以接下都默认以速度曲线探究对象。

动画曲线

对于运动曲线无非可以总结:缓动、缓入、缓出,繁多复杂的各种曲线都可以归纳去;

缓入(先快后慢)曲线先是陡峭再变得舒缓

只会用缓动?五分钟让你学会AE动画曲线!

只会用缓动?五分钟让你学会AE动画曲线!

缓出(先慢后)曲线先舒缓再突然变得陡峭

只会用缓动?五分钟让你学会AE动画曲线!

只会用缓动?五分钟让你学会AE动画曲线!

缓动(慢进慢出)其实按 F9 默认曲线(默认抛物线)是缓动了,默认这条抛物线在实动画制作不够,为了动画更有节奏,需要我们把和两端陡峭度比调更强烈,即两边更舒缓,更陡峭。

只会用缓动?五分钟让你学会AE动画曲线!

只会用缓动?五分钟让你学会AE动画曲线!

动画曲线的应用

缓一般以用在出现的时;也就是一个镜头开始的时,或者某个物出现的时,下图中,由小放大的两个圆、弹的硬币、建筑物是快速出现,缓缓停下

只会用缓动?五分钟让你学会AE动画曲线!

△ 流说务英语课程动画

缓出一可以用在消失的候;也就是镜头画面结束需要移出,或者某个图形消失的候,下图中,人物字的画面缓缓移动,然后快速消失

只会用缓动?五分钟让你学会AE动画曲线!

△ 流利说®商英语课程动画

缓动类型曲线般可以用在表演时候;即图形或主体已经在画,这个时候为了图形运动自然流畅,适合用两边慢快曲线,图形运动前后缓冲时越长,节奏越强烈;

只会用缓动?五分钟让你学会AE动画曲线!

△ 流利说®Kion 英语

只会用缓动?五分钟让你学会AE动画曲线!

△ Flatwhite 平白工作

总结一下,就始出用缓入,结束消失用缓出,中间表演用缓动。当然,实际应用中曲线远比面提到的复杂,需根据实际况调节曲线的弧度,从影响动画节奏。

如何在实际案例中运用动画曲线

实际的动画制作中都这些曲线的综合运用,比如下面的方块弹出再消失,我设置了一方块场、缓冲静止、离场的动画。

按“P”,给方的位置属性 K 键帧,中有键帧,右键“键帧差值”,把空间插值改为线;

只会用缓动?五分钟让你学会AE动画曲线!

然后会发现画较平均僵硬,没有节奏感。

只会用缓动?五分钟让你学会AE动画曲线!

,接来就需要调节画曲线,在这之前我们可先分析方整个画的,这个画虽然简单,但却包含了我们前面说的个过程(现-中间表演-消失),方弹即现,方冲落的缓冲则属于中间表演,落即是消失,

是,我们以把曲按照上述整为样:

只会用缓动?五分钟让你学会AE动画曲线!

现在动画已经有运动节奏,效果比之前很

只会用缓动?五分钟让你学会AE动画曲线!

为动画更富,以上个旋转的动画,整下旋转属的动画曲(下图绿曲):

只会用缓动?五分钟让你学会AE动画曲线!

只会用缓动?五分钟让你学会AE动画曲线!

为了效果更好,上残影效果和弹跳(motion2 自带弹跳)

只会用缓动?五分钟让你学会AE动画曲线!

得到最终效果

只会用缓动?五分钟让你学会AE动画曲线!

总结

本文概括性的总结三类不同的运动曲线的应用景,速帮家掌握AE动画曲线,不过要把握好动画节奏,需要掌握必要动画规律,以及多多练习,在实践感受动画运动曲线于动画化影响。最后,希望能够大家有所帮助。

欢迎关注「流利设团队」公众:

只会用缓动?五分钟让你学会AE动画曲线!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

对如今的 UX 设计师来说,会点动效基本已是常规操作了。作为 UX 设计师,动效可以辅助的产出可以涵盖界面交互动效、项目宣传 ...
AE动效
写这篇文章的起因是前段时间在 Meidum 上读到的一篇驳斥 Dribbble 发展现状的文章。文章发表在 16 年,其中提到:「我不认为 ...
AE动效
化繁为简,是解决难题的好办法。今天的文章将会教你如何拆分一个动画,以及如何使得动画符合一般物理学规律而变得生动。 ...
AE动效
大家好,我是彩云。在动画落地的过程中,配合Lottie插件输出JSON动画文件是大家常用的方法。今天这篇分享,将会讲到Lottie这...
AE动效
疫情期间,在线生活迎来爆发 ,视频行业成了广大网民放松娱乐和了解疫情、学习防护知识的重要平台。 短视频行业的日活用户规...
AE动效
编者按:UI中动效设计本没有那么玄乎,作为 Google 旗下 Material Design 团队中动效设计的负责人之一,Jonas Naimark 对于动...
AE动效
10个动效案例,让大家避开动效误区。 一、走路 在做走路动画的时候,除了要把脚与地面的接触做出来,更应该要注意的是身体不...
AE动效
上一篇文章《比阿里犸良还强大!Lottie 动效设计完全指南(基础篇)》已经系统地为大家讲解了 Lottie 动效的基本知识,相信很...
AE动效