Unity动画入门：按钮动画与2D精灵动画制作详解

Unity动画入门：按钮动画与2D精灵动画制作详解

经常有开发者反映，他们花费大量精力制作UI，但效果仍然不尽如人意。其实，除了UI设计本身，给UI添加动画效果也是提升用户体验的重要手段。本文将详细介绍Unity引擎中按钮动画和2D精灵动画的制作方法，帮助开发者轻松实现动感UI。

按钮动画

效果展示

让平淡的Button多一点交互效果。就是总是平铺直叙的，玩家当然会觉得没意思了。如果你让她这儿点点，那儿碰碰，诶，有效果，是不是就激发了她玩的欲望啦？

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

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

那我们就来实现一下。

创建并配置按钮

• 先创建一个按钮
• 接着，按钮的检视面板Inspector，Transition改为Animation
  这步完成将默认的颜色动画调整为Animation动画，接下来我们会用Animation进行创作动画。
• 点击Auto Generate Animation，确定动画资源保存位置。
  这步给按钮创建了Animator和Animation，一会我们调整Animation，即可改变按钮的触发效果了

调整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选项即可。

测试

好啦，运行游戏测试一下吧
没出错吧，出错的开发者把1扣在公屏上~

2D精灵动画

效果展示

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

素材

将这四张图片放到你的Assets中
并设置为Sprite2D格式

制作2D精灵动画

从Assets将这四个图片拖到Hierarchy窗口，系统会自动跳出创建动画窗口，
设置要创建的动画保存位置，即可完成2D精灵动画的创建。
这时你可看到图像可能有点小，可能不在视野中心，调调比例和位置就好啦。

调整播放速度

这时运行游戏，可能看到播放速度有点快
我们双击状态机Animator，进入该动画的状态机编辑器。
看到“New Animation”，将它的Speed调低一点

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