Unity 动画系列一 属性动画 序列帧动画

参考
Unity动画系统详解1:在Unity中如何制作动画?
Unity 动画系统 Animation 和 Animator的小实例
Unity/Animation -- 创建Animation Clip

一、单独Animation来实现

空场景,找到一张Sprite图片,拖到面板中,右键添加Animation组件。如下:


image.png

选中图片,点击Unity的 Window->Animation->Animation。注意确认提示中的To begin animation后面的名称,是不是自己要添加的动画目标


image.png

点击create后,保存ani文件。点击 Add Property,选择Transform的Position,并在下图内容中的右侧建立几个关键帧。
image.png
image.png

这里发现只有Position.z,原因我暂时没搞清楚。而换成3D物体,菜单就是这样的了


image.png

这里可以创建另外一个ani


image.png

默认播放ani2
二、Animation和Animator来实现

与方式一不同的是,不要先添加Animation组件,直接Window--Animation--Animation,命名保存后,会出现2个文件:


image.png

image.png
image.png

看起来是引擎自动生成了twoImage.controller控制器,也就是Animator组件,而不是方式一中的Animation组件。创建动画保存后运行,发现动画已经生效了。再创建一个动画twoAni2,然后点击Window--Animation--Animator,来观察Animator视图:


image.png

橙色的待机动画是初始状态,其他状态都需要从这里出发,也都能回到这里。每个灰色矩形的状态表示一种动画,箭头连线表示状态切换方向。(关于状态机,后面还会详细说。)


image.png

使用Make Transition可以将twoAni2也连接上,这样播完twoAni1后,会播放twoAni2。在这个面板上,双击twoAni1或twoAni2,也可以直接 进入动画编辑窗口。默认的twoAni2一直在循环播放,可以在资源管理窗口找到它,然后把Loop time勾掉


image.png
image.png
三、Animation 和 Animator 联系与区别

参考
Unity 动画系统 Animation 和 Animator 联系与区别

1.组件添加的区别
  • 当先手动给物体添加了Animation组件之后,再通过Window->Animation。创建的是Animation。(老版的Animation)
  • 如果不添加Animation组件,直接Window->Animation。创建的是Animation和Animator一起。(新版的Animator)
2.动画常用类

在unity的老版本中我们只有Animation组件,在4.6版本以后则增添了Animator组件,如果只是控制一个动画的播放我们则用Animaton组件,如果是很多动画之间相互转换则使用Animator组件,它们两者的区别就是Animator有一个动画控制器(俗称动画状态机),使用它来进行动画切换是非常方便的,但缺点是占用内存比Animaton组件大。

要注意的是Animator Controller和Animation Clip都是文件(File),Animator则是GameObject上的一个组件(Component),不能混为一谈。

  • Animator:动画控制器,控制Mecanim动画系统的接口,用来管理多个动画;
  • Animation:用于播放动画,老版中单独的一个Animation也可以完成动画的播放和切换,不过状态切换之类的需要程序猿代码控制。在新版中,状态管理部分交给了Animator;
  • AnimationClip:动画剪辑片段,储存基于关键帧的动画,是用于Animation来播放动画;
  • AnimationState:动画状态,用来改变单一动画的播放速度、权重、时间、层级、播放Mode,以及混合模式;
  • AnimationEvent:动画事件,用于某种条件下触发自定义函数;
  • StateMachineBehaviour: 动画状态机管理器拓展类,脚本继承了该类之后,绑定到Animator上某State上面。当状态发生变化,可以重载响应函数。类似 触发器的响应函数;
四、制作动画的面板功能
image.png

Animation窗口有两种模式:录制模式和预览模式。

  • 在录制模式下,当你对物体进行改动时(例如移动、旋转、缩放、修改属性等),Unity会自动在当前时间位置生成关键帧,记录修改的属性。

  • 在预览模式下,修改物体不会自动创建/修改关键帧,如果需要创建/修改关键帧,你需要手动点击添加关键帧按钮。

1.录制模式

点击录制按钮后,就进入了录制状态。此时关键帧部分会变成红色。


image.png

在录制模式下,不管是在场景中移动、旋转、缩放物体,还是在Inspector面板中修改物体组件的属性(Unity动画支持的属性),Unity都会自动在动画Clip的当前时间上添加关键帧保存。

我们可以在Animation窗口中拖到自己想添加关键帧的地方,然后回到scene场景中修改物体的属性,反复重复这样的步骤,然后退出录制状态,就自动生成想要的动画了。

2.手动创建关键帧

如果没有在录制模式下,对物体的修改不会自动记录到动画Clip中。如果需要记录,需要手动添加关键帧进行记录。

如果在Inspector中修改了物体的属性,物体的属性会从浅蓝色背景变为浅红色,代表该属性已经被修改。这时候你可以右键点击对应的属性,在弹出菜单中点击Add Key即可添加关键帧,将该属性的数据保存到动画Clip中。如果你在当前帧修改了多个属性,可以点击菜单中的Key All Modified(将所有修改的属性记录关键帧)或Key All Animated(记录属性列表中所有属性的数值,即使与上一帧相同数值的属性也会被记录)来一次性将所有修改的属性保存。


image.png

也可以点击Animation窗口左侧的Add Keyframe按钮来记录当前属性列表中选中属性的关键帧,如果当前没有选中任何属性,则会记录所有属性。

3.Curves视图

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


image.png

如图,这是一个很简单的Rotation动画,只有X在第43帧变为75.634。
将鼠标移到紫色点处,会变成可以移动的四角形,可以直接调节动画效果:


image.png

此时返回dopesheet视图,发现关键帧和数值都被改变了


image.png
4.编辑关键帧

编辑关键帧时,可以多选(在Curve编辑中同理):

  • 按住Shift或Ctrl,再点击关键帧可以选中多个关键帧
  • 通过框选多选关键帧
  • 按住Shift或Ctrl的同时框选,可以添加或移除框选住的关键帧
image.png

v2-b9060ebed757b328bfb995eee840b365_b.gif

你会发现直接拖拽多个关键帧时,后方的关键帧并不会跟随这些关键帧移动。如果你想让后方的关键帧也跟着移动,可以按住R键,同时拖拽这些关键帧。这种编辑方式叫做Ripple Edit(在音视频编辑软件中很常见)。缩放同理。

五、修改曲线
1.创建动画,Add Property后,添加曲线
image.png

点击属性视图中Position属性左侧的三角标识,可以展开显示Position.x, Position.y, Position.z的属性。现在选中绿色的那个,去控制y属性。

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


在红框处右键Add Key

如下图,添加了两个key,并且Position.y设置为1,中间一段一直为1,多一点跳到高处的滞留时间。


image.png
2.修改曲线为直线
image.png

将两侧都改为Linear后,变成了这样,注意那个勾从Clamped Auto变成Broken


image.png

在Curves中预定义了五种不同的Key点切线类型,它们分别是:

  • Clamped Auto: Unity5之后使用的默认切线类型,可以根据给定的Key生成平滑曲线
  • Auto: Unity5之前使用的默认切线类型,保留用于兼容之前的版本,不建议使用
  • Free Smooth:可以手动调节Key点切线斜率,但为了保证切点左右两侧曲线平滑衔接,左右两侧切线固定共线
  • Flat:斜率为0的切线,可以看做Free Smooth的特殊版本
  • Broken: 左右两侧切线不共线,生成的曲线大多不平滑,但变化性更加丰富。设置为Broken的Key点可以单独设置左右两侧切线的类型,其中就包含了我们用到的Linear。
六、动画事件
image.png
这里能看到添加的多个事件,选中它,查看属性

image.png

Evnet事件帧会在游戏运行时,场景中的物体在Animator的控制下,播放该动画片段到对应位置时,触发该物体上的某个脚本中的一个可以作为AnimationEvent挂载的方法

  • 该方法必须是publice void
  • 该方法可以有至多一个参数,且参数类型必须是 int float string GameObject四种之一
  • 如果有参数传入,我们可以在Event事件帧,选中这个方法后,在下方输入确定(序列化)这个参数

给触发动画的物体挂个脚本后,在事件帧上就能选方法了

public class AniEvent : MonoBehaviour
{
    public void Animation_EventLog(int n)
    {
        Debug.Log("On Animation Event!!!" + n);
    }
image.png

鼠标移上去会有提示
On Animation Event!!!4
UnityEngine.Debug:Log(Object)
AniEvent:Animation_EventLog(Int32) (at Assets/Scripts/AniEvent.cs:9)
七、序列帧动画

参考
unity动画之帧动画使用

1.四张图片,代表四帧的动画
image.png
2.将四张图片拖入Assets/effect/explosionSmoke,并修改类型为Sprite(2D and UI)
3.选中所有图片拖入到Hierarchy

这时会提醒你保存一个动画,保存在Assets中/effect/explosionSmoke中,命名为explosionSmoke,保存动画即可 。


image.png
4.点击 Window - Animation - Animation,打开动画编辑器

可以根据需要,调整Samples值。这样,帧动画就实现了。

5.注意SpriteRenderer 和Image的区别

可以参考Unity UGUI系列二 图片 SpriteRenderer和Image
通过观察,上面步骤做出的动画是拖到场景里,使用SpriteRenderer完成的。如果我们想在Canvas下,使用Image制作也是可以的。

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

推荐阅读更多精彩内容