Unity/Animation -- 调节Animation Curves

概念

Dopesheet

上一次说到我们可以通过Animation窗口创建Animation Clip,其中比较重要的步骤就是设置KeyFrame(我习惯把它叫做关键帧)。而Anmation窗口中的Dopesheet视图主要就是以时间轴的方式线性显示了KeyFrame的位置,效果大概是下图所示。

这里要补充几个关于Dopesheet视图的使用技巧:

和Hierarchical窗口类似,Dopesheet左侧的属性也是以层次结构显示的,这意味着我们可以改变GameObject的子对象的属性。

KeyFrame的视图可以通过快捷键F自适应从而达到最佳的显示效果;若想放大局部观察,可以使用Ctrl + 鼠标左键平移,使用Ctrl + 鼠标右键缩放。

可以按下鼠标左键选择一组Key进行操作,当选择完成时,所选Key的左右两侧会生成边界指示,如下图所示: 

点击边界区域并拖放即可平移一组Key,点击边界并拖放即可比例缩放所选Key,具体效果自己试一试就知道了。

Curves

如果想只使用Dopesheet实现比较好的动画效果还是比较困难的,因为它并不能直观地反映参数随时间变化的函数。这时我们可以在Animation窗口左下角切换到Curves视图, 具体效果如下图

在Curves视图中,所有属性随时间变化的函数都会绘制在同一个坐标轴下。所以一般我们只需在属性列表中选取希望观察的属性即可。这里可以使用通用的Ctrl+鼠标左键Shift+鼠标左键的方式选取。同样的,想要观察局部,可以在Curves视图使用的快捷键基本与Dopesheet中相同(FCtrl + 鼠标左键Ctrl + 鼠标右键)。

使用Curves视图的优点在于我们可以手动控制曲线的形状,并且实现的效果更加直观。下面将通过创建一个旋转弹跳的长方体来演示Curves视图的使用。

示例:活跃的方块

这是一个Unity官方文档中给出的示例,我们接下来将试着模拟它的动画

创建方块以及附属动画

在Hierarchy窗口中单击右键并选择3D Object - Cube创建一个方块。打开Animation视图(快捷键为Ctrl+6),选中新建的方块即可看到为Cube创建一个新的Animation Clip(若有疑问可参考文首的链接)。

模拟方块的跳动

模拟方块的上下跳动我们可以通过改变y轴方向上的位移实现,这里我们可以有两种处理方法,一种是匀速的上下跳动,一种是更实际的抛物线式轨迹。这里就分别用Curves视图实现这两种效果。 

单击Create按钮创建一个Animator和附属的Aniamtion,然后点击Add Property添加一个Transform-Position属性。

Transfrom是Unity预定义的一种组件(Component),在Scene中的每个物体都会带有一个Transform组件,用于管理该物体的位置(Position),旋转(Rotation),规模(Scale)。

点击属性列表右下角的Curves按钮,我们就可以切换到Curves视图中。不出意外的话,我们可以观察到一条水平的直线,这表示Cube的位置随时间的函数是一个常函数,即不发生任何变化。当然我们可以通过添加Key修改函数曲线。

注意:Position实际上包含了三条函数曲线,由于我创建的Cube位于坐标原点,所以三条曲线都是 y=0,如果你的Cube的Position为(a,b,c),那么你应当看到三条曲线,分别是y=a, y=b, y=c。

通过点击属性视图中Position属性左侧的三角标识,可以展开显示Position.x, Position.y, Position.z的属性,你也可以选定三个属性中的任意一种单独显示。这里我们只选择Position.y进行观察和修改。选中后得到的效果应该如图所示, 曲线的颜色与Position.y右侧标识符的颜色保持一致。

为了模拟上下跳动的效果,我们可以在动画所有采样点的中点处设置一个Key,表示弹跳的最高点。先在0:30处鼠标右键Add key添加一个关键点,然后鼠标左键按住并沿Y轴拖拽来改变该点的Position.y的值。

小窍门: 

- 拖拽改变Key的位置时我们经常会遇到对不齐理想位置的情况,这时可以在拖拽时按下Ctrl键来实现离散式拖拽,即只会拖拽到网格点上。 

- 如果你在缩放后曲线变得不好观察了,完全可以使用A(All)来回到全局最佳观察视图。

这里我选择Position.y的值为1,你也可以选择其他的值。改变过后的视图应该是下面这样: 

你可能会好奇为什么只指定几个关键点就可以生成这么优雅的曲线,其实这里用到了计算机图形学中比较重要的一种曲线:B样条曲线(B-spline), 这种曲线的绘制只需要指定一个点集就可以生成一条贯穿它们所有点的曲线。感兴趣的可以参考Dr. C.-K. Shene的Introduction to Computing with Geometry Notes

做到这一步其实我们已经得到了一个类抛物线式的曲线了,当然我们也可以在最高点和最低点设置一个滞留时间,让动画更加Interesting。我修改后的曲线就像下面这样:

接下来,我们创建另一个Cube来演示匀速运动如何实现。 

我们可以直接像上述步骤一样先得到一个平滑曲线,然后在三个Key值点通过鼠标右键选择它们的切线类型。在Curves中预定义了五种不同的Key点切线类型,它们分别是: 

Clamped Auto: Unity5之后使用的默认切线类型,可以根据给定的Key生成平滑曲线 

Auto: Unity5之前使用的默认切线类型,保留用于兼容之前的版本,不建议使用 

Free Smooth:可以手动调节Key点切线斜率,但为了保证切点左右两侧曲线平滑衔接,左右两侧切线固定共线 

Flat:斜率为0的切线,可以看做Free Smooth的特殊版本 

Broken: 左右两侧切线不共线,生成的曲线大多不平滑,但变化性更加丰富。设置为Broken的Key点可以单独设置左右两侧切线的类型,其中就包含了我们要用到的Linear。 

注意: 当改变了Key点左右两侧的Tangents类型,Key点的类型会自动更改为Broken。

为了实现匀速直线运动,我们只需把每个Key点设置为Both Tangents - Linear,这样就可以得到分段的斜率固定的两条曲线。 

模拟方块的弹性

如果我们想给Cube加上一点弹性,可以让它在最低点和最高点时有一点压缩,在上升和下降的过程中因为惯性有一点拉伸,同样是只针对y方向上的值而言。 

这里给出我实现的曲线供参考,你可以试着自己做做看。

模拟方块的旋转

方块的旋转我们使用匀速旋转即可,1s可以设置为旋转360。 

曲线如图所示: 

模拟方块的颜色渐变

没错,我们甚至可以设置方块的颜色变化,这是通过改变RGBA的值来实现的。在Add Property中我们添加Mesh Renderer - Material.__Color属性, 然后更改rgba四个属性的值。

RGBA是一种通用的表示颜色的模式,四个分量分别表示红色(Red),绿色(Green),蓝色(Blue),透明度(Alpha)。这种模式表示的色彩属于加色模式,详情可自行百度。

这里我在0:30处修改Color.g 和 Color.b分量的值为0.5,实现颜色的渐变,曲线如图所示:

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,084评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,623评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,450评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,322评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,370评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,274评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,126评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,980评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,414评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,599评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,773评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,470评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,080评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,713评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,852评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,865评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,689评论 2 354

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,485评论 6 30
  • 一、实验目的 学习使用 weka 中的常用分类器,完成数据分类任务。 二、实验内容 了解 weka 中 explo...
    yigoh阅读 8,527评论 5 4
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,110评论 5 13
  • 在我们的游戏开发过程中,有一个很重要的工作就是进行碰撞检测。例如在射击游戏中子弹是否击中敌人,在RPG游戏中是否捡...
    壹米玖坤阅读 24,308评论 0 17
  • //方案一var SingletonTester = (function () {//单例方法function S...
    小漠穷秋阅读 142评论 0 0