游戏制作之路(61)使用UGUI的按钮动画

栏目: 后端 · 发布时间: 5年前

前面学习过按钮的事件响应,当鼠标移动上面时,按钮可以更改颜色,但是在游戏里一般追求就是个性化,以及动画大量的使用。当鼠标移动到按钮上面时,要想播放一个动画怎么办呢?这时就需要使用按钮动画的功能了,这个功能可以使用在所有GUI的组件上,比如弹出式菜单、隐藏菜单等等。既然这个功能这么强大,下面就先从简单的学习起来,如下图创建一个空的3D工程:

游戏制作之路(61)使用UGUI的按钮动画

创建空的工程,把场景保存为Test,然后按前面的方法来创建按钮,并调整场景视图如下:

游戏制作之路(61)使用UGUI的按钮动画

在这里可以看到右边上的属性,都是默认创建按钮的属性,并没有进行修改,特别要注意看到Transition这个选项,它还是Color Tint的方式,下面就要对这个方式进行修改:

游戏制作之路(61)使用UGUI的按钮动画

在这里选择Transition下拉列表,就可以看到四个选项,我们要选择Animation方式,也就是动画方式来显示按钮的不同的状态,确定之后就会显示如下图:

游戏制作之路(61)使用UGUI的按钮动画

当你选择Animation之后,就可以看到在下面出现Auto Generate Animation按钮,点击这个按钮之后,就可以生成按钮四个状态的动画控制器,弹出下面的窗口来保存按钮的动画控制器,这里采用默认的文件名称:

游戏制作之路(61)使用UGUI的按钮动画

保存完成之后,就可以看到Assets里多了一个Button动画控制器,当你选中按钮之后,可以查看到右边的属性多了一个Animator组件,这个组件里的控制器就是A处的Button:

游戏制作之路(61)使用UGUI的按钮动画

为了修改四个状态显示的动画,需要进入动画编辑器里录制动画,从主菜单Window/Animation里进入,如下图:

游戏制作之路(61)使用UGUI的按钮动画

当弹出动画编辑器之后,记得要选中A处的按钮,才可以对它进行编辑动画:

游戏制作之路(61)使用UGUI的按钮动画

当你看到这个动画编辑器窗口时,就可以进行录制动画了:

游戏制作之路(61)使用UGUI的按钮动画

在A处选择按钮之后,就可以看到Animation里的B处出现Normal状态,这个是表示按钮在正常状态的动画,点击B处之后,下拉列表就会显示按钮的四个状态的动画,可以根据自己的需要来选择修改那一个状态动画,在这里我们来选择Highlighted状态,这个状态是表示当鼠标放到按钮上面时显示的动画,因此选择C处的选项,就进入下图来编辑Highlighted状态动画:

游戏制作之路(61)使用UGUI的按钮动画

要想进入录制动画时,需要先确认A处选中按钮,然后点击B处来设置按钮大小变换工具,再点击C处小红点,就进入录制状态了。D仍然是Highlighted状态,E处是确认为从0帧开始录制,目前这个动画总共有60帧,0帧是表示开始,30帧是中间,60帧是结束。

游戏制作之路(61)使用UGUI的按钮动画

在这里做一个比较简单的动画,就是按钮大小变大,然后再变小。处于录制状态,就是小红点按下,前面play按钮显示为红色状态,然后在帧位置编辑框里输入30,并回车,看到右边的红线就移动中间位置,这时候在Scene里拖动按钮的大小,就生成如下显示:

游戏制作之路(61)使用UGUI的按钮动画

当在A处把按钮变大之后,就可以看到B处增加一些数据,在C处就增加了关键的点,有了这两处数据,unity就自己去计算中间的动画了,也就是进行插值运算。接着继续修改:

游戏制作之路(61)使用UGUI的按钮动画

接着在A处把帧位置移动60,然后再把B处的按钮拖小一些,这样就可以让按钮从小到大,再从大到小地变化,这个变化过程就是动画了,当然你也想查看一下这个动画是否满意,可以点击播放按钮:

游戏制作之路(61)使用UGUI的按钮动画

在A处点击播放按钮预览,就可以查看动画是否符合预期,如果不行就可以再修改。

游戏制作之路(61)使用UGUI的按钮动画

当动画录制完成之后,就可以在A处取消录制,然后点击B处的play模式,就可以把鼠标放到C处的按钮上,就可以看到按钮在大小地不断变化。按钮其它状态的动画,也可以按照这个过程来实现,其实还可以更换按钮的图片,或者文字的颜色等等。

https://blog.csdn.net/caimouse/article/details/51749579


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UX设计之道

UX设计之道

[美]Russ Unger、[美]Carolyn Chandler / 陈军亮 / 人民邮电出版社 / 2015-4-1 / 49.00元

本书的目标是提供一些基本的工具及应用场景,帮助你及工作团队一起来使用这些工具和方法。正如你将在本书很多章节中看到的那样,我们没有尝试包罗万象、迎和所有的人,但我们试图给你提供一些用户体验(UX)设计师需要具备的核心信息和知识。除了我们自己的案例外,我们还提供了一些帮你了解如何开始准备基本材料的案例,让你可综合这些信息来创建某些更新、更好或者是更适合自己意图的东西。一起来看看 《UX设计之道》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具