0
0

【Unity】Unity使用动画实现场景转换

文章目录

前言

哈喽，大家好，我是FEZ98.
由于今天需要实现一个小项目中的场景转换效果，于是使用了Animator简单的实现了这个需求，同时也与大家分享一下今日的收获，如果哪里有错误，还望朋友们指正。
使用动画实现简单的场景转换的思路是向场景中添加一个专门处理转换效果的

Image

(UGUI)，同时向其添加一个

Animator

，向

Aniamtor

中加入两个

State

，一个设置为

Set as Layer Defalut State

，即默认状态，播放进入场景后需要的效果，另一个则设置为关闭场景需要的效果，添加一个转换，并设置相应的参数，这样当我们加载下一场景时，只需要在脚本中设置相应的参数即可调用关闭场景需要的效果。

一、制作LevelLoader

首先我们需要制作一个

GameObject

用来存放场景转换效果所需对象与脚本，同时可以单独加一个

Camera

用来单独显示转换特效。如下图：
在这里插入图片描述

二、制作相应场景转换特效

1.淡入淡出效果

向LevelLoader中添加一个Canvas，命名为Crossfade，添加一个

Image

，命名为Mask_Img，这个将这个

Image

设置为全黑色，如下：
在这里插入图片描述
此时，我们可以通过

Animator

来直接控制

Image

的

Color

的

Alpha

来调整该图片的透明度，使其实现逐渐透明的效果，这样就可以实现淡出淡出的效果。
可是，如果直接通过控制

Alpha

来调整透明度，如果后续我们需要在该场景转换效果中添加一些文本或者图片，那么就要单独设置这些新添加的组件的透明度，这样就会很麻烦。因此，我们可以像Mask_Img中添加一个

Canvas Group

组件，之后把需要添加的组件作为Mask_Img的子节点，那么我们就可以避免做一些多余的工作了。
为Mask_Img添加一个

Text

子组件，然后直接控制

Canvas Group

，就可以看到效果了。如下图：
在这里插入图片描述

扩展：
Canvas Group可集中控制整组 UI 元素的某些方面，而无需单独处理每个元素。画布组的属性会影响所在的游戏对象以及所有子对象。
在这里插入图片描述

回到正文，在添加完Mask_Img后，我们就可以通过

Animator

控制其

Canvas Group

来制作动画了，在

Hierarchy

选中Crossfade对象，按下Ctrl+6打开

Animation

。
在这里插入图片描述
之后将其命名为Crossfade_End，即创建了一个

Animator Clip

，同时Unity会自动为我们创建一个名为Crossfade的

Animator Controller

，并将添加到Crossfade自动添加的

Animator

组件中。
单击

 Animation Record

按钮进入动画录制模式，当然也可单击

Preview

按钮进入预览模式。之后在时间轴中选中

1:00

的位置，这串数字第一个代表秒，第二个代表帧，

1:00

即是1秒和60帧。
在这里插入图片描述
之后将Mask_Img的

Canvas Group

中的

Alpha

值由1变成0，即完成了淡入场景转换的动画效果。
在这里插入图片描述
之后我们可以先单击选中

0:00

处的关键帧，按住Shift再单击

1:00

处的关键帧，按Ctrl+C进行复制。之后创建一个新的

Animation Clip

，命名为Crossfade_Start。
在这里插入图片描述
再将两个关键帧的位置调转，这样我们就完成了Crossfade_Start的制作。
在这里插入图片描述
打开Crossfade 

Animator Controller

进入Animator界面，在这里我们就要设置由动画转换状态了，添加一个’Trigger’参数，命名为Start，用来控制在转换场景时通知

Animator

播放Crossfade_Start效果。
在这里插入图片描述
之后从Crossfade_End右键单击

Make Transition

指向Crossfade_Start，同时对Transition进行以下设置
在这里插入图片描述
之后我们将Crossfade_End和Crossfade_Start的

Loop Time

取消勾选，因为我们只需要它们播放一次即可。
在这里插入图片描述
好了，这样我们就完成了淡入淡出的动画转场特效。当然现在还无法在场景中真正的应用，因为还缺少控制脚本，我们会在第三部分讲到同步与异步加载场景的控制脚本。

2.圆形擦除效果

首先我们用Photoshop制作一张如下的png图片。
在这里插入图片描述
之后，同上述步骤一样，创建一个名为CircleWipe的

Canvas

，之后将椭圆形图片加入其中，并使其能完全覆盖住CircleWipe。
在这里插入图片描述
之后将其拖到右侧，使其无法显示在CircleWipe中。
在这里插入图片描述
我们创建一个

Aniamtor Override Controller

，其作用是扩展

Animator Controller

，从而可以使我们使用新的动画替换掉原

Animator Controller

中使用的动画，但保留其原始结构，参数与逻辑。
在这里插入图片描述
之后将其添加到CircleWipe的Animator中
在这里插入图片描述
下面我们制作一个椭圆形由

Canvas

中间向左侧移动的动画名为CircleWipe_End。

在这里插入图片描述
接着我们复制CircleWipe_End的关键帧，同时进行反转，注意这里要将

0:00

关键帧

Position

取反，使其从右侧移动到中心。
在这里插入图片描述
在这里插入图片描述
之后，我们进行CircleWipe

Animator Override Controller

的设置，将Crossfade

Animator Controller

作为原控制器，之后使用我们新制作的两个动画进行替换即可。
在这里插入图片描述
这样我们就完成了圆形擦除场景转换效果的制作。

3.Logo旋转效果

对于Logo旋转场景转换的效果步骤大体与圆形擦除一致，以下是LogoRotate_End与LogoRotate_Start的

Animation Clip

。
在这里插入图片描述
在这里插入图片描述

三、编写控制场景转换效果脚本

1.同步加载场景

（1）将控制脚本添加进LevelLoader中。

publicclassLoadLevelsManager: MonoBehaviour
{
    Animator animator;privatevoidAwake(){
        animator = GameObject.Find("Crossfade").GetComponent<Animator>();}privatevoidUpdate(){if(Input.GetMouseButtonDown(0)){LoadNextLevel();}}publicvoidLoadNextLevel(){StartCoroutine(LoadLvel(SceneManager.GetActiveScene().buildIndex +1));}

    IEnumerator LoadLvel(int levelBuildIndex){
        animator.SetTrigger("Start");//播放淡出特效yieldreturnnewWaitForSeconds(1);//等待1秒，因为单个场景转换特效的时长是1秒

        SceneManager.LoadScene(levelBuildIndex);//加载Scenes In Build 中下一场景}}

（2）创建一个新场景，并将LevelLoader添加进其中。

在这里插入图片描述

（3）将场景添加进Build Settings。

在这里插入图片描述

（4）最终淡入淡出效果。

在这里插入图片描述

（5）最终圆形擦除效果。

在这里插入图片描述

（6）最终Logo旋转效果。

在这里插入图片描述

2.异步加载场景

（1）分析需求。

这部分我们会在异步加载场景的过程中添加场景转换效果。
首先，我们将Crossfade的

Animator

设置如下
在这里插入图片描述
其中Crossfade_Idle是一个什么都不发生的动画。

因为每次新创建一个场景，我们都需要将LevelLoader预制体添加到场景中会比较麻烦，因此我考虑使用单例模式加上

DontDestroyOnLoad

方法，这样在第一次加载后，LevelLoader就不会被销毁，在后续新添加的场景中自然也不用添加LevelLoader了。之后，我们还希望使用一个LevelLoader就可以使用不同的场景转换动画，这样可以方便我们进行后续新的场景转换动画的添加与使用。于是我们需要添加一个用于控制不同场景转换动画的脚本。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;publicenum Effect  //三种场景转换特效{
    Crossfade =0,//淡入淡出
    CircleWipe =1,//圆形擦除
    LogoRotate =2,//Logo旋转}publicclassTransitionEffect: MonoBehaviour
{privatestatic TransitionEffect _instance;publicstatic TransitionEffect Instance { get {return _instance;}}

    Animator m_CrossfadeAnim;//淡入淡出
    Animator m_CircleWipeAnim;//圆形擦除
    Animator m_LogoRotateAnim;//Logo旋转privatevoidAwake(){if(_instance ==null){DontDestroyOnLoad(this);
            _instance =this;}else{Destroy(this);}

        m_CrossfadeAnim = GameObject.Find("Crossfade").GetComponent<Animator>();
        m_CircleWipeAnim = GameObject.Find("CircleWipe").GetComponent<Animator>();
        m_LogoRotateAnim = GameObject.Find("LogoRotate").GetComponent<Animator>();}/// <summary>/// 播放指定类型场景转换结束动画/// </summary>/// <param name="effect">场景转换特效类型</param>publicvoidHandleAllAnimationEnd(Effect effect){switch(effect){case Effect.Crossfade:SetTransitionEffectEnd(m_CrossfadeAnim);break;case Effect.CircleWipe:SetTransitionEffectEnd(m_CircleWipeAnim);break;case Effect.LogoRotate:SetTransitionEffectEnd(m_LogoRotateAnim);break;default:break;}}privatevoidSetTransitionEffectEnd(Animator animator){
        animator.SetTrigger("End");
        Debug.Log("AnimationClip_End is Start!");}/// <summary>/// 播放指定类型场景转换开始动画/// </summary>/// <param name="effect">场景转换特效类型</param>publicvoidHandleAllAnimationStart(Effect effect){switch(effect){case Effect.Crossfade:SetTransitionEffectStart(m_CrossfadeAnim);break;case Effect.CircleWipe:SetTransitionEffectStart(m_CircleWipeAnim);break;case Effect.LogoRotate:SetTransitionEffectStart(m_LogoRotateAnim);break;default:break;}}privatevoidSetTransitionEffectStart(Animator animator){
        animator.SetTrigger("Start");
        Debug.Log("AnimationClip_Start is Start!");}/// <summary>/// 判断当前动画是否完成播放/// </summary>/// <param name="effect">场景转换特效类型</param>/// <returns></returns>public bool HandleAllAnimationDone(Effect effect){switch(effect){case Effect.Crossfade:returnIsAnimationClipDone(m_CrossfadeAnim);case Effect.CircleWipe:returnIsAnimationClipDone(m_CircleWipeAnim);case Effect.LogoRotate:returnIsAnimationClipDone(m_LogoRotateAnim);default:break;}returnfalse;}private bool IsAnimationClipDone(Animator animator){//normalizedTime:整数部分为状态已循环的次数。小数部分为当前循环的进度百分比 (0-1)if(animator.GetCurrentAnimatorStateInfo(0).normalizedTime <1){returnfalse;}
        Debug.Log("AnimationClip is Over!");returntrue;}}

代码比较简单并且都加上了注释，就不进行详细讲解了。TransitionEffect 主要用到了单例模式，配合上DontDestroyOnLoad它就可以在运行期间一致存在，我们就不用向同步加载场景那样需要不断往新创建的场景中加入LoadLevelManager。
下一部分是控制异步加载场景及选择使用的场景转换特效。

LoadNextLevel(string levelName, Effect effect)

方法有两个参数，一个是下一需要加载场景的名称，一个用于控制场景转换效果类型（淡入淡出、圆形擦除、Logo旋转等）。

LoadLevel(string levelName, Effect effect)

则是具体实现异步加载的一个协程。我们需要在开始异步加载后，将

allowSceneActivation

设置为false，这样

asyncOperation.progre

会停在0.9并且

asyncOperation.isDone

也会一直为false。将

LoadAble

设置为false，这样除非当前协程执行完毕，否则无法调用加载另一个场景的方法。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;publicclassAsyncLoadLevelManager: MonoBehaviour
{privatestatic AsyncLoadLevelManager _instance;publicstatic AsyncLoadLevelManager Instance { get {return _instance;}}public bool LoadAble { get;private set;}//当前是否可以场景转换privatevoidAwake(){if(_instance ==null){DontDestroyOnLoad(this);
            _instance =this;}else{Destroy(this);}}privatevoidStart(){
        LoadAble =true;//初始允许场景转换}/// <summary>/// 使用指定场景转换特效异步加载下一场景/// </summary>/// <param name="levelName">下一场景名称</param>/// <param name="effect">场景转换特效类型</param>publicvoidLoadNextLevel(string levelName, Effect effect){if(!LoadAble){return;}StartCoroutine(LoadLevel(levelName, effect));}

    IEnumerator LoadLevel(string levelName, Effect effect){
        AsyncOperation asyncOperation = SceneManager.LoadSceneAsync(levelName);//异步加载下一场景
        asyncOperation.allowSceneActivation =false;//当allowSceneActivation为false时,asyncOperation.progre会停在0.9并且asyncOperation.isDone也会一直为false
        LoadAble =false;//当前不允许转换场景

        TransitionEffect.Instance.HandleAllAnimationStart(effect);//播放场景转换开始动画yieldreturnnull;while(asyncOperation.progress <0.9f)//检查是否已完成异步加载{yieldreturnnull;}while(!TransitionEffect.Instance.HandleAllAnimationDone(effect))//检查当前动画是否完成播放{yieldreturnnull;}

        asyncOperation.allowSceneActivation =true;//允许场景准备就绪后立即激活场景while(!asyncOperation.isDone)//检查是否已经激活场景{yieldreturnnull;

            TransitionEffect.Instance.HandleAllAnimationEnd(effect);//播放场景转换结束动画}while(!TransitionEffect.Instance.HandleAllAnimationDone(effect))//检查当前动画是否完成播放{yieldreturnnull;}

        LoadAble =true;//可以继续转换场景}}

之后，我们用一个测试脚本进行方法的调用。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;publicclassTest: MonoBehaviour
{privatevoidUpdate(){if(Input.GetMouseButtonDown(0))//点击鼠标左键{
            AsyncLoadLevelManager.Instance.LoadNextLevel("SceneB", Effect.Crossfade);}elseif(Input.GetMouseButtonDown(1))//点击鼠标右键{
            AsyncLoadLevelManager.Instance.LoadNextLevel("SceneC", Effect.CircleWipe);}elseif(Input.GetMouseButtonDown(2))//点击鼠标中键{
            AsyncLoadLevelManager.Instance.LoadNextLevel("SceneA", Effect.LogoRotate);}}}

最终效果如下：
在这里插入图片描述

扩展
背景图片移动

using UnityEngine;
using UnityEngine.UI;publicclassBackgroundMove: MonoBehaviour
{public float speed =0;//移动速度
   float pos =0;//当前位置private RawImage image;voidStart(){
       image = GetComponent<RawImage>();}voidUpdate(){
       pos += speed;if(pos >1.0F)

           pos -=1.0F;

       image.uvRect =newRect(pos,0,1,1);}}

四、完毕

好啦，以上就是我今天想要分享的内容啦~
我是FEZ98：https://blog.csdn.net/weixin_43057990
原创不易，若转载请注明出处，感谢大家~
喜欢我的可以点赞、关注、收藏，最后希望能够对大家有所帮助！

标签： unity 游戏引擎 ui
本文转载自: https://blog.csdn.net/weixin_43057990/article/details/128646865
版权归原作者 FEZ98 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【Unity】Unity使用动画实现场景转换”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航