Unity动画☀️二、什么是按钮动画？什么是2D精灵动画？如果你想知道，我现在就带你研究！

经常有小老弟跟我说，啊橙哥，我很费劲地做了UI，想做的画面漂亮出色，就差通宵打磨了，我付出了这么多，为啥还是这么怪呢？

我知道了，是不是我没有审美天赋，难道我们这些程序Engineer就不能做出带感的游戏了吗？

老弟呀你可真误会了，虽然漂亮的UI人人都喜欢，但我们程序也有很多有优点啊，我们还可以给UI做动画啊。

想做出动感的UI没有你们想的那么难好么？今天就来给你们传授几招！

🟥 按钮动画

效果展示：

让平淡的Button多一点交互效果。

就是总是平铺直叙的，玩家当然会觉得没意思了

如果你让她这儿点点，那儿碰碰，诶，有效果，是不是就激发了她玩的欲望啦？

上面按钮的效果分为两块：

1. 鼠标移入，按钮变大
2. 鼠标移入，按钮变色

那我们就来实现一下。

1️⃣ 创建并配置按钮

• 先创建一个按钮
• 接着，按钮的检视面板Inspector，Transition改为Animation

这步完成将默认的颜色动画调整为Animation动画，接下来我们会用Animation进行创作动画。

• 点击Auto Generate Animation，确定动画资源保存位置。

这步给按钮创建了Animator和Animation，一会我们调整Animation，即可改变按钮的触发效果了

2️⃣ 调整Animation

有心急的小老弟就问了啊：

橙哥，改变Animation为什么就能改变按钮的效果呢？

上一步，我们点击“Auto Generate Animation”，是创建了一个Animator和5个Animation

在不同的触发时，比如鼠标移入、移出，挂载在该按钮上的Animator就会调用对应的Animation，使用Animation里的设置，控制按钮改变效果。

所以我们调整Animation，就实现了改变按钮效果。

1、选中层级面板上的按钮，点击Unity上方的 Window--Animation--Animation，弹出Animation面板

选择Highlighted动画，该动画是鼠标移入时触发的动画。

2、点击红色的录制圆点

在时间线0s处，

随意改变检视面板上按钮scale的值，再调回原值（1,1,1）

随意改变按钮的颜色，再调回白色

这时你会发现Animation窗口的0s处多了scale和颜色的关键帧

将竖直的白色时间线拖到0.05s处

改变检视面板上按钮scale的值为（1.2，1.2，1）

改变按钮的颜色为橙色

点击红色按钮结束录制。

3、取消Loop

创建的Animation默认是循环播放动画的，即意味着当鼠标移入时，它会不停地播放这个效果。

但我们只想让它播放一次就好了。

选中该动画，取消检视面板的Loop选项即可。

3️⃣ 测试

好啦，运行游戏测试一下吧

没出错吧，出错的小老弟把1扣在公屏上~

🟧 2D精灵动画

效果展示：

下图是是实现了Unity中播放四张卡通图片。

1️⃣ 素材

将这四张图片放到你的Assets中

并设置为Sprite2D格式

2️⃣ 制作2D精灵动画

从Assets将这四个图片拖到Hierarchy窗口，系统会自动跳出创建动画窗口，

设置要创建的动画保存位置，即可完成2D精灵动画的创建。

这时你可看到图像可能有点小，可能不在视野中心，调调比例和位置就好啦。

3️⃣ 调整播放速度

这时运行游戏，可能看到播放速度有点快

我们双击状态机Animator，进入该动画的状态机编辑器。

看到“New Animation”，将它的Speed调低一点

大家还有什么问题，欢迎在下方留言！