创建循环过渡

Version:2022.1+

此示例演示了如何利用 TransitionEndEvent 创建循环过渡。

示例概述

以下示例演示了两个循环动画：

溜溜球模式：循环从状态 A 开始，通过过渡到达状态 B，然后通过过渡返回到状态 A。
A 到 B：循环从状态 A 开始，通过过渡到达状态 B，然后在没有过渡的情况下返回到状态 A。

您可以在此 GitHub 代码仓库中找到此示例创建的完整文件。

先决条件

本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发者。在开始之前，请熟悉以下内容：

创建示例

使用任何模板在 Unity 中创建项目。
在项目 (Project) 窗口中，创建一个名为 loop-transition-example 的文件夹。
在文件夹中右键单击并选择创建 (Create) > UI 工具箱 (UI Toolkit) > Editor 窗口 (Editor Window)。
在 UI 工具箱 Editor 窗口创建工具 (UI Toolkit Editor Window Creator) 窗口中，输入 LoopingExample。
保存更改。这会创建三个文件：LoopingExample.cs、LoopingExample.uss 和 LoopingExample.uxml。

将 LoopingExample.cs 替换为以下内容：

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public class LoopingExample : EditorWindow
{
    [SerializeField] private VisualTreeAsset m_VisualTreeAsset = default;
    private Label _yoyoLabel;
    private Label _a2bLabel;
    [MenuItem("Window/UI Toolkit/Transition Looping Example")]
    public static void ShowExample()
    {
        var wnd = GetWindow<LoopingExample>();
        wnd.titleContent = new GUIContent("TransitionStyle");
    }
    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;
        VisualElement asset = m_VisualTreeAsset.Instantiate();
        root.Add(asset);
        SetupYoyo(root);
        SetupA2B(root);
    }
    // This method powers the yo-yo loop.
    private void SetupYoyo(VisualElement root)
    {
        _yoyoLabel = root.Q<Label>(name: "yoyo-label");
        // When the animation ends, the callback toggles a class to set the scale to 1.3 
        // or back to 1.0 when it's removed.
        _yoyoLabel.RegisterCallback<TransitionEndEvent>(evt => _yoyoLabel.ToggleInClassList("enlarge-scale-yoyo"));
        // Schedule the first transition 100 milliseconds after the root.schedule.Execute method is called.
        root.schedule.Execute(() => _yoyoLabel.ToggleInClassList("enlarge-scale-yoyo")).StartingIn(100);
    }
    // This method powers the A-to-B cycle.
    private void SetupA2B(VisualElement root)
    {
        _a2bLabel = root.Q<Label>(name:"a2b-label");
        _a2bLabel.RegisterCallback<TransitionEndEvent>(evt =>
        {
            _a2bLabel.RemoveFromClassList("enlarge-scale-a2b");
            _a2bLabel.schedule.Execute(() => _a2bLabel.AddToClassList("enlarge-scale-a2b")).StartingIn(10);
        });
        _a2bLabel.schedule.Execute(() => _a2bLabel.AddToClassList("enlarge-scale-a2b")).StartingIn(100);
    }
}

将 LoopingExample.uxml 替换为以下内容：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" 
         xsi="http://www.w3.org/2001/XMLSchema-instance" 
         engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" 
         noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" 
         editor-extension-mode="False">
    <Style src="LoopingExample.uss" />
    <ui:VisualElement name="container">
        <ui:VisualElement>
                <ui:Label text="Yo-yo Transition" name="yoyo-label" class="text-style" />
        </ui:VisualElement>
        <ui:VisualElement>
                <ui:Label text="A-to-B Transition" name="a2b-label" class="text-style"/>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

将 LoopingExample.uss 替换为以下内容：

    #yoyo-label{
        transition-duration: 3s;
    }

    .text-style {
        font-size: 20px;
        flex-grow: 0;
        margin: 20px; 
    }

    .enlarge-scale-a2b{
        scale: 1.5 1.5;
        transition-duration: 3s;
    }
        
    .enlarge-scale-yoyo{
        scale: 1.5 1.5;
    }

    #container{
        flex-grow:1;
        justify-content: space-around;
        align-items: center;
    }

要测试示例，请从菜单中选择窗口 (Window) > UI 工具箱 (UI Toolkit) > 过渡循环示例 (Transition Looping Example)。

其他资源

创建过渡事件

UI 渲染器

Unity 手册

创建循环过渡

示例概述

先决条件

创建示例

其他资源