最近在做一个小游戏开始的时候需要用到倒计时的效果,具体效果为每秒显示3,2,1,GO,然后字体由大到小,透明度由浅到深。下面介绍三种方法。
1.最直接的方法,自己写倒计时的函数,开协程改变字体大小和透明度,这种方法较为简单,下面是我写的代码,其中state为需要改变的Text的text组件
public void WaitForBegin(int time) { StartCoroutine(waitForBegin(time)); } IEnumerator waitForBegin(int time) { float second = 1f; Color color=new Color(0, 0, 0, 1); while(time>0) { State.text = time.ToString(); while (second > 0) { second -= Time.deltaTime; State.fontSize++; State.color -= new Color(0, 0, 0, Time.deltaTime); yield return new WaitForEndOfFrame(); } second = 1f; time--; State.color +=color; State.fontSize = StateFontSize; } State.text = "GO"; while (second > 0) { second -= Time.deltaTime; State.fontSize++; State.color -= new Color(0, 0, 0, Time.deltaTime); yield return new WaitForEndOfFrame(); } State.fontSize = StateFontSize; }
2.使用dotween,dotween是一个Unity插件,主要用于做UI动画,具体的使用方法可以参考官网的文档Dotween官方文档,下面给出使用dotween的代码。值得注意的是,使用dotween要特别注意函数执行次序,因为本质上这些函数也是协程,只不过给你封装好了,如果没有进行判断结束,很可能导致意想不到的结果,这点相比于方法1,虽然看起来简洁一点,但是用起来要花很多心思。
IEnumerator waitForBegin(int time) { StateText.text = time.ToString(); Tween scale = transform.DOScale(5, 1).From(); Tween fade = StateText.DOFade(0, 1).From(); while (time > 0) { if (!fade.IsPlaying()) { time--; if (time == 0) { StateText.text = "GO"; } else { StateText.text = time.ToString(); } scale = transform.DOScale(5, 1).From(); fade = StateText.DOFade(0, 1).From(); } yield return new WaitForEndOfFrame(); } }
3.使用动画,这种方法比较推荐。因为实际上这种倒计时的动画不会和场景中的任何对象产生交互,除了动画结束需要一个通知外,完全与游戏无关。而且制作起来也很方便。下面介绍这种方法。
首先创建一个用于展示的UI对象,类型为Text。为Text添加animation组件,这个animation就是倒计时的动画。
接下来制作用于播放的animation clip,在window 窗口中找到animation窗口点开如图
点击create,创建一个新的clip,选择保存的路径和名称后,点击add property,如图
这里我们需要改变的是字体的透明度,所以点开text,添加color属性。
接下来就是关键步骤了,展开color属性我们可以看到r g b a,这个就是每一帧属性值,我们就是通过修改关键帧的属性值,来达到动画的效果。比如我们想让字体颜色1秒内由浅到深,也就是rgba中的a值从0变化到1,那么可以在0帧的时候将a值设置为0,60帧的时候将a值设置为1。
可以通过红圈里面的值快速定位到关键帧
这个时候第一秒的渐变效果就做好了,把这个animation clip拖入text的animation组件的animation中,点击开始游戏,可以看一下效果。
其实到这里基本的思路就讲完了。剩下的2和1基本上是一样的,字体大小的话这里可以改变rect Transfrm里面的scale属性来实现。
最后就是如何改变文字内容,这里其实需要添加一个事件,可以在60帧的时候改变,也可以在61帧的时候改变,具体看个人喜好。
选择第60帧,右键点击Add Animation Event,或者点击左边的符号添加事件
此时在inspector视图中会出现一个animation event,选择function set_text,string填入2就可以实现了。
顺便说一下,改变字体大小也可以在这里设置set_fontSize,具体看个人需求。
下面总结一下动画的思路,0帧设置内容为3,透明度为0,scale为3,60帧设置透明度为1,scale为1;61帧设置内容为2,透明度为0,scale为3,120帧设置透明度为1,scale为1,依次类推,就可以实现倒计时动画啦。