创建循环过渡

版本：2022.1+

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

示例概述

此示例演示两个循环动画

• Yo-yo：循环从状态 A 到状态 B 带过渡，然后通过过渡返回状态 A。
• A 到 B：循环从状态 A 到状态 B 带过渡，然后不带过渡返回状态 A。

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

先决条件

本指南适用于熟悉 Unity 编辑器、UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。更多信息
请参阅术语表 工具包和 C# 脚本的开发者。在开始之前，请熟悉以下内容

• UXML
• USS 过渡
• 过渡事件

创建示例

1. 在 Unity 中使用任何模板创建一个项目。

2. 在您的项目窗口显示您的Assets文件夹内容的窗口（项目选项卡）更多信息
   请参阅术语表中，创建一个名为loop-transition-example的文件夹。

3. 在文件夹中右键单击，然后选择创建 > UI 工具包 > 编辑器窗口。

4. 在UI 工具包编辑器窗口创建器窗口中，输入LoopingExample。

5. 保存您的更改。这将创建三个文件，分别为LoopingExample.cs、LoopingExample.uss和LoopingExample.uxml。

6. 将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);
       }
   }
   

7. 将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>
   

8. 将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;
       }
   

9. 要测试该示例，请从菜单中选择窗口 -> UI 工具包 -> 过渡循环示例。

其他资源

• USS
• 处理事件
• 创建过渡事件
• 使用 UI Builder 和 C# 脚本创建简单的过渡