经常有小老弟跟我说,啊橙哥,我很费劲地做了UI,想做的画面漂亮出色,就差通宵打磨了,我付出了这么多,为啥还是这么怪呢?
我知道了,是不是我没有审美天赋,难道我们这些程序Engineer就不能做出带感的游戏了吗?
老弟呀你可真误会了,虽然漂亮的UI人人都喜欢,但我们程序也有很多有优点啊,我们还可以给UI做动画啊。
想做出动感的UI没有你们想的那么难好么?今天就来给你们传授几招!
效果展示:
让平淡的Button多一点交互效果。
就是总是平铺直叙的,玩家当然会觉得没意思了
如果你让她这儿点点,那儿碰碰,诶,有效果,是不是就激发了她玩的欲望啦?
上面按钮的效果分为两块:
那我们就来实现一下。
这步完成将默认的颜色动画调整为Animation动画,接下来我们会用Animation进行创作动画。
这步给按钮创建了Animator和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扣在公屏上~
效果展示:
下图是是实现了Unity中播放四张卡通图片。
将这四张图片放到你的Assets中
并设置为Sprite2D格式
从Assets将这四个图片拖到Hierarchy窗口,系统会自动跳出创建动画窗口,
设置要创建的动画保存位置,即可完成2D精灵动画的创建。
这时你可看到图像可能有点小,可能不在视野中心,调调比例和位置就好啦。
这时运行游戏,可能看到播放速度有点快
我们双击状态机Animator,进入该动画的状态机编辑器。
看到“New Animation”,将它的Speed调低一点
大家还有什么问题,欢迎在下方留言!