请点击右上角在浏览器中打开

什么是关键帧?AE动效关键帧解析

veleap头像
冰可乐
2021-11-17
15366
正文内容

什么是关键帧?帧是计算机动画的一种术语,帧指的就是动画中最小单位的单幅影像画面,相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。而关键帧相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来自动创建,这种被软件自动创建出来的帧,叫做过渡帧或者中间帧。

关键帧

而说到关键帧(Keyframe)大家可能并不陌生,毕竟在工作中或多或少都会接触到一些关于动效的知识,但对于大多数人而言也就了解一两种,对其他关键帧并不是太了解,那今天我们就来聊一聊——关键帧。

首先我们要知道AE一共存在多少种类型的关键帧呢?答案是7种类型的关键帧,而每一种关键帧类型出现的场景各不相同,产生的效果也有所差异,这7种关键帧包括:

1、普通关键帧(线性关键帧)
2、缓动关键帧
3、缓入关键帧
4、缓出关键帧
5、平滑关键帧
6、定格关键帧
7、漂浮穿梭时间(浮点型关键帧)

关键帧,关键帧类型,AE,AE教程


01 普通关键帧

普通关键帧也就是我们经常看到的菱形关键帧也可以叫做线性关键帧,这种关键帧最为常见,在做匀速运动时应用此类型的关键帧。可以在两个关键帧之间产生匀速的变化。

如下图所示,小球从A点运动至B点,且任意相等时间内的运动距离完全相同,即匀速直线运动。

普通关键帧,关键帧类型,AE,AE教程
▲动作拆解

普通关键帧,关键帧类型,AE,AE教程
▲连贯动作

关键帧与贝塞尔曲线对比图,AE,关键帧
▲关键帧与贝塞尔曲线对比图

Tips:匀速运动即匀速直线运动(uniform rectilinear motion) ,是指物体的速度为一定值。此时物体在一直线上运动,且在任意相等的时间间隔内通过的位移相等。

匀速运动只有匀速直线运动,但匀速圆周运动实际上是匀速率圆周运动或者是匀角速度运动,其加速度不为零,故匀速圆周运动不是匀速运动。


02 缓动关键帧

缓动关键帧又称缓入缓出关键帧,它能够使动画的运动变得更加平滑和自然,并使其更加符合现实的运动性质,选中普通关键帧按F9键即可以将普通关键帧转换为缓动关键帧。转换后我们可以在贝塞尔曲线图表中清晰的发现,在入点和出点处它有一个渐渐加速和渐渐的减速的过程。缓动关键帧也是动效设计中最为常用的一种关键帧类型。

缓动关键帧,AE
▲动作拆解

缓动关键帧,AE
▲连贯动作

缓动关键帧,AE,贝塞尔曲线
▲关键帧与贝塞尔曲线对比图

Tips:贝塞尔曲线(Bezier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等。

贝塞尔曲线就是一条曲线, 它是依据四个位置任意的点坐标绘制出的一条光滑曲线。在历史上,研究贝塞尔曲线的人最初是按照已知曲线参数方程来确定四个点的思路设计出这种矢量曲线绘制法。贝塞尔曲线的有趣之处更在于它的“皮筋效应”,也就是说,随着点有规律地移动,曲线将产生皮筋伸引一样的变换,带来视觉上的冲击。1962年,法国数学家Pierre Bezier第一个研究 了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名是为贝塞尔曲线。

贝塞尔曲线,AE,AE教程


03 缓入、缓出关键帧

与缓动关键帧效果类似,只是实现某一段动画的平滑过渡,包括入点平滑和出点平滑,其中缓入是出点平滑也就是先快后慢,缓出是入点平滑也就是先慢后快。由下图可以看出,当缓入缓出应用在相邻的两个关键帧上时,其效果和缓动关键帧是一致的。

缓入、缓出关键帧,AE,AE教程
▲动作拆解

缓入、缓出关键帧,AE,AE教程
▲连贯动作

缓入、缓出关键帧,AE,AE教程
▲关键帧与贝塞尔曲线对比图

Tips:重物下落案例解析

质量非常大的球体,从高处下落至地面(忽略球体产生的形变以及反弹),这时你会怎么做?

我相信绝大多数人都会在起始点A和结束点B,这2个位置点打关键帧,再加上缓动,然后就结束了。如果是这样,我们来看一下实现出来的效果:

重物下落,贝塞尔曲线,AE

是不是感觉不太舒服,毕竟给出的命题为《重物下落》,所以上面的做法是错误的。那么该如何做出重物下落到地面的效果呢?其实很简单,只需要在上面的基础之上进行调节即可,首先要明确,重物下落至地面,它的速度在接触地面的瞬间肯定不会为零,所以这里只需要调节,结束点点贝塞尔曲线,使其速度不为零即可。

重物下落,贝塞尔曲线,AE

经过上面2图的对比我们可以非常明显的看出,调整后的小球运动更加符合客观事实。这个案例告诉我们,在做动效设计的时候,一定要注意细节的调整,要让运动的元素尽量的符合用户的认知,也就是符合现实世界中的运动规律,如果是一些夸张的表现形式,可以适当违背运动规律。比如:弹力非常大的小球运动。


04 平滑关键帧

平滑关键帧也就是平时看到的圆形关键帧,一般会在元素速度转变的折点处应用,平滑关键帧能够使动画曲线变得平滑可控,让动画的转变衔接更加自然流畅,实现方法是按住Ctrl(苹果用户是按住Cmd)键点击关键帧即可。

平滑关键帧,AE
▲调整前

平滑关键帧,AE
▲调整后


05 定格关键帧

定格关键帧分为3个类型,其中一种是文字图层改变源文本的正方形关键帧,另外2种分别是由线性关键帧和缓动关键帧转换而来。而正方形关键帧比较特殊,是硬性变化的关键帧,在文字变换的动画中常用,可以在一个文字图层改变多个文字源文本,以实现不用多个图层就能做出不一样的文字变换效果。

3种定格关键帧的作用效果,如下图所示:

定格关键帧,AE
▲正方形定格关键帧

线性关键帧转为定格关键帧,AE
▲线性关键帧转为定格关键帧

缓动关键帧转为定格关键帧,AE
▲缓动关键帧转为定格关键帧


06 漂浮穿梭时间

关于漂浮穿梭时间,可能大多数人都不知道这个是干什么的,它的官方解释是这样的:

根据离选定关键帧前后最近的关键帧的位置,自动变化选定关键帧在时间上的位置,从而平滑选定关键帧之间的变化速率。

对于官方的这个解释大家可能有些困惑,那我们通过实例来解释一下这个漂浮穿梭时间是什么意思。

一个小球沿着下图的螺旋线做曲线运动,但由于螺旋形状的特殊结构,小球越接近螺旋线的内部,在运动速度保持恒定不变的情况下,越到螺旋内部,相邻2个关键帧之间所需的运动时间就越短,可以简单理解为关键帧从稀疏变密集的过程,但是我们很难手动的分配每一个关键帧的位置应该在哪里,这时就可以用到AE提供的“‘漂浮穿梭时间”功能了,它能够自动计算中间关键帧的位置,并随着开始和结束关键帧的位置自动调节它所处的位置。漂浮穿梭时间可以有效提升工作效率,减少特殊场景下K帧的大量工作。

漂浮穿梭时间,AE,关键帧,AE教程

漂浮穿梭时间,AE,关键帧,AE教程

Tips:

什么是关键帧差值?

所谓差值就是2个已知值之间填充未知数据的过程。After Effects可以为关键帧之间所有时间的属性插入值。简单来说,就是你告诉计算机某个属性数值是0,第10秒属性数值是100,那么从0到100的变化过程就是差值的过程。由于插值在关键帧之间生成属性值,因此插值有时也称为补间。关键帧之间的插值可以用于对运动、效果、音频电平、图像调整、透明度、颜色变化以及许多其他视觉元素和音频元素添加动画。关键帧差值分为两种,一种是时间差值,另一种是空间差值。

时间差值和图表

在值图表中你可以对为动画创建的时间属性关键帧进行精确调整。值图表将X值显示为红色,y值显示为绿色,而z值(仅3D)显示为蓝色。值图表提供有关合成中任何时间点的关键帧值的完整信息,同时能够对其进行设置。之前所说的缓入缓出就是时间差值中的一种。

空间差值和图表

在对位置等属性应用或更改空间插值时,可以在“合成”面板中调整运动的路径。运动路径上的不同关键帧可提供有关任何时间点的插值类型的信息。当你在图层中创建空间变化时,AE使用的是“自动贝塞尔曲线”空间差值的方式。

空间差值又可以分为5种:线性插值(Liner)、自动贝塞尔曲线(Auto Bezier)、连续贝塞尔曲线(Continuous Bezier)、贝塞尔曲线(Bezier)、定格(Freeze Frame)。

线性差值

线性插值在关键帧之间创建统一的变化率,这种方式会让动画看起来非常的机械,关键帧属性的数值变化速度也是均匀的,可以简单理解为,线性插值就是默认关键帧的图标,它使2个关键帧之间的数值变化是匀速的。

自动贝塞尔曲线

自动贝塞尔曲线差值是通过创建平滑的变化速率,可以自动变化已实现关键帧之间的平滑过渡。

连续贝塞尔曲线和贝塞尔曲线

连续贝塞尔曲线和贝塞尔曲线他们都与自动贝塞尔曲线差值一样,也是通过关键帧创建平滑的变化速率,但是可以手动调节曲线的手柄位置。

定格

定格顾名思义就是2个关键帧之间没有任何的属性变化,只有在关键帧的位置处才会发生变化。

关键帧分析,AE

在做动效设计时,要时刻注意运动元素是否符合运动规律,只有符合现实世界中的运动规律,才会让动效更容易被用户所接受。同时,动效设计离不开关键帧,关键帧存在七种类型,分别为:线性关键帧、缓动关键帧、缓入关键帧、缓出关键帧、平滑关键帧、定格关键帧、漂浮穿梭时间(浮点型关键帧),在不同场景下合理使用对应的关键帧,能够让动效更加柔和自然。

以上就是AE关键帧解析的全部内容了,更多AE教程、AE插件资源欢迎关注VE Leap社区

相关阅读:

浮动文字特效怎么做?两分钟学会AE制作浮动文字特效

干货丨抖音故障风效果制作教程

原作者:王雨_Vision
公众号:CD动效研究院

  • AE使用教程
  • AE教程
  • AE教程
/
立即打卡
点击下方”选择文件"或将文件拖拽到此区域
支持批量上传,上传格式为mp4文件
*标题:
*简介:
下载专区

温馨提示

暂不支持 系列版本下载 欢迎加入社区交流群,获取最新产品及资讯