Unity | 动画组件篇-动画组件的认识和如何简单使用序列帧

矫情吗；* 2023-09-24 23:53 48阅读 0赞

### 一、动画系统 ###

> 动画系统包含两个东西：
> 
> 1.动画
> 
> 2.控制动画啥时候播放的东西

### 二、Animation（动画） ###

#### 1.创建Animation界面 ####

首先，有一个面板，名字叫做Animation

我们的动画都是在这上面制作的。

![aa6d3930c3fa458097e009ba075d1c23.gif][]

再来一个静止的图片，你通过上面过程打开是这样子的

![9274380cf1144f39b2967f4012ca8e2e.png][]

我们做动画，一般得有个物体，所以想做动画，也要先选择一个初始物体

红框意思是：你什么物体都没有选择。

--------------------

当你选择一个物体后，就会出现创建的按钮。

![a231583713184eb9bca924a20bd03513.png][]

创建的过程就是起名字，选文件夹，这我就不多说了。

> **有意思的是： 在这里创建，它会自动给你也创建一个动画控制器。**
> 
> ![d07823786314414787d42df9449ebb20.png][]
> 
> 这个图标是小三角的，就是动画（注意我建的动画的名字是“图片动画”）
> 
> 图标是把两个方块用线连起来的，就是动画控制器（控制器的名字一般是和物体一样的）
> 
> ![c4a51a08203342d6a30f66b97f75bc1d.png][]
> 
> （图标也比较好理解，控制器就是把动画和动画连起来）

创建之后，我们的动画界面也变了：

![17c1dc36aab34ce9ad03e4d044330462.png][]

#### 2.Animation界面介绍 ####

![5c94665618de4ccb965c86bd6d8183a5.png][]

![407e0a94c7134a9bb126825920badd09.png][]

一帧可以简单理解为一张图，那么上面这张图的意思就是，我一秒可以放60张图 。

#### 3.简单案例 ####

> 还是这句话，想做动画，总要有个物件吧。
> 
> 这个按键就可以选择，加什么？
> 
> ![8a159127fee74c6698c40cf0b0e6f590.png][]

> 因为我们这个动画是在image上建的，所以我们只能做和image有关的动画，现在只有两个选择。
> 
> ![aca7fa370c2743ecb550f4e67c28aa84.png][]
> 
> 这两个选择分别对应的是image上的组件。
> 
> ![72ca492f48c14d4287f7be369ba2a4a3.png][]
> 
> 选Transform，就可以改变物体的位置什么的
> 
> 如果选image就可以改变物体的颜色之类的

**我们先选个位置吧。**

![86e3be00db94422bbcd5312fa3d8b417.png][]

这时候，左边有了你选的东西（点小三角可以展开）

![fdd7d7b6db08426ba9ea1d8f362e8487.png][]![d5822a53fc2c4bcb89694b4a4a303f4a.png][]

右边，就有了几个点，这些点，就是到这个点的时候，你希望他们在什么位置？

![3ad8d3d2265a454d98b0938236c9b025.png][]

> 下面就是改数值的步骤：
> 
> 1.把白色竖条，移到第一个点，点击第一个点，在左边输入数值
> 
> 2.把白色竖条，移到最后一个点，点击最后一个点，在左边输入数值
> 
> 3.点击播放键，可以看见位移动画做好了
> 
> ![25d3a48e69664c1cb78959eb129f4e43.gif][]

这时候，你点击程序的播放，也会自动播放动画。

![887fe219e54f4e1bb43768f16bc53818.gif][]

**复杂的后面更，今天就讲个最简单的。**

#### **4.序列帧案例** ####

**我们先撤回到刚刚新建好的一步。**

找到一套，你喜欢的序列帧，先放进程序里

![1fdd5b8b143c4fad95567db965f59420.png][]![c35f7ef244d04e73876bb9a3543bb437.png][]

把他们全选，拖进Animation里

![690fabcf2dd5451faa0c6c28d5c0d4c8.gif][]

现在就可以直接播放了

![9527fe2b49dd4d4e9af59c6e93c07a23.gif][]

#### 5.其他按钮讲解 ####

![7b5988cda37f49f2a73812e7c9cb6d3b.png][]

像现在小蓝点这么密集，你想选择其中一个，怪不容易的（下面的几个就很好改）

![ab459481d7d64dea941c1642d2a093f8.png][]

### 三、Animator（动画控制器） ###

![a41e22a0c9c14fd3bf355232f16ead3d.gif][]

累了，改天再更~~~

[aa6d3930c3fa458097e009ba075d1c23.gif]: https://img-blog.csdnimg.cn/aa6d3930c3fa458097e009ba075d1c23.gif
[9274380cf1144f39b2967f4012ca8e2e.png]: https://img-blog.csdnimg.cn/9274380cf1144f39b2967f4012ca8e2e.png
[a231583713184eb9bca924a20bd03513.png]: https://img-blog.csdnimg.cn/a231583713184eb9bca924a20bd03513.png
[d07823786314414787d42df9449ebb20.png]: https://img-blog.csdnimg.cn/d07823786314414787d42df9449ebb20.png
[c4a51a08203342d6a30f66b97f75bc1d.png]: https://img-blog.csdnimg.cn/c4a51a08203342d6a30f66b97f75bc1d.png
[17c1dc36aab34ce9ad03e4d044330462.png]: https://img-blog.csdnimg.cn/17c1dc36aab34ce9ad03e4d044330462.png
[5c94665618de4ccb965c86bd6d8183a5.png]: https://img-blog.csdnimg.cn/5c94665618de4ccb965c86bd6d8183a5.png
[407e0a94c7134a9bb126825920badd09.png]: https://img-blog.csdnimg.cn/407e0a94c7134a9bb126825920badd09.png
[8a159127fee74c6698c40cf0b0e6f590.png]: https://img-blog.csdnimg.cn/8a159127fee74c6698c40cf0b0e6f590.png
[aca7fa370c2743ecb550f4e67c28aa84.png]: https://img-blog.csdnimg.cn/aca7fa370c2743ecb550f4e67c28aa84.png
[72ca492f48c14d4287f7be369ba2a4a3.png]: https://img-blog.csdnimg.cn/72ca492f48c14d4287f7be369ba2a4a3.png
[86e3be00db94422bbcd5312fa3d8b417.png]: https://img-blog.csdnimg.cn/86e3be00db94422bbcd5312fa3d8b417.png
[fdd7d7b6db08426ba9ea1d8f362e8487.png]: https://img-blog.csdnimg.cn/fdd7d7b6db08426ba9ea1d8f362e8487.png
[d5822a53fc2c4bcb89694b4a4a303f4a.png]: https://img-blog.csdnimg.cn/d5822a53fc2c4bcb89694b4a4a303f4a.png
[3ad8d3d2265a454d98b0938236c9b025.png]: https://img-blog.csdnimg.cn/3ad8d3d2265a454d98b0938236c9b025.png
[25d3a48e69664c1cb78959eb129f4e43.gif]: https://img-blog.csdnimg.cn/25d3a48e69664c1cb78959eb129f4e43.gif
[887fe219e54f4e1bb43768f16bc53818.gif]: https://img-blog.csdnimg.cn/887fe219e54f4e1bb43768f16bc53818.gif
[1fdd5b8b143c4fad95567db965f59420.png]: https://img-blog.csdnimg.cn/1fdd5b8b143c4fad95567db965f59420.png
[c35f7ef244d04e73876bb9a3543bb437.png]: https://img-blog.csdnimg.cn/c35f7ef244d04e73876bb9a3543bb437.png
[690fabcf2dd5451faa0c6c28d5c0d4c8.gif]: https://img-blog.csdnimg.cn/690fabcf2dd5451faa0c6c28d5c0d4c8.gif
[9527fe2b49dd4d4e9af59c6e93c07a23.gif]: https://img-blog.csdnimg.cn/9527fe2b49dd4d4e9af59c6e93c07a23.gif
[7b5988cda37f49f2a73812e7c9cb6d3b.png]: https://img-blog.csdnimg.cn/7b5988cda37f49f2a73812e7c9cb6d3b.png
[ab459481d7d64dea941c1642d2a093f8.png]: https://img-blog.csdnimg.cn/ab459481d7d64dea941c1642d2a093f8.png
[a41e22a0c9c14fd3bf355232f16ead3d.gif]: https://img-blog.csdnimg.cn/a41e22a0c9c14fd3bf355232f16ead3d.gif