最近在做一个小游戏开始的时候需要用到倒计时的效果,具体效果为每秒显示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窗口点开如图

unity 让动画片段播放最后一帧 unity动画定格在最后一帧_Time


点击create,创建一个新的clip,选择保存的路径和名称后,点击add property,如图

unity 让动画片段播放最后一帧 unity动画定格在最后一帧_unity 让动画片段播放最后一帧_02

这里我们需要改变的是字体的透明度,所以点开text,添加color属性。

接下来就是关键步骤了,展开color属性我们可以看到r g b a,这个就是每一帧属性值,我们就是通过修改关键帧的属性值,来达到动画的效果。比如我们想让字体颜色1秒内由浅到深,也就是rgba中的a值从0变化到1,那么可以在0帧的时候将a值设置为0,60帧的时候将a值设置为1。


可以通过红圈里面的值快速定位到关键帧

unity 让动画片段播放最后一帧 unity动画定格在最后一帧_Time_03

unity 让动画片段播放最后一帧 unity动画定格在最后一帧_游戏_04

这个时候第一秒的渐变效果就做好了,把这个animation clip拖入text的animation组件的animation中,点击开始游戏,可以看一下效果。


其实到这里基本的思路就讲完了。剩下的2和1基本上是一样的,字体大小的话这里可以改变rect Transfrm里面的scale属性来实现。

最后就是如何改变文字内容,这里其实需要添加一个事件,可以在60帧的时候改变,也可以在61帧的时候改变,具体看个人喜好。

选择第60帧,右键点击Add Animation Event,或者点击左边的符号添加事件

unity 让动画片段播放最后一帧 unity动画定格在最后一帧_Time_05

此时在inspector视图中会出现一个animation event,选择function set_text,string填入2就可以实现了。

unity 让动画片段播放最后一帧 unity动画定格在最后一帧_ui_06

顺便说一下,改变字体大小也可以在这里设置set_fontSize,具体看个人需求。


下面总结一下动画的思路,0帧设置内容为3,透明度为0,scale为3,60帧设置透明度为1,scale为1;61帧设置内容为2,透明度为0,scale为3,120帧设置透明度为1,scale为1,依次类推,就可以实现倒计时动画啦。