使用 UI 生成器和 C# 脚本创建简单的过渡

版本： 2021.3+

此示例演示如何创建由伪类和 C# 事件触发的简单转换。

示例概述

该示例创建了一个自定义编辑器窗口，其中包含三个标签，当您将鼠标悬停在它们上时，这些标签会旋转和缩放。过渡持续三秒钟。

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

先决条件

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

• UI 生成器
• USS
• 伪类
• 处理事件

创建编辑器窗口文件

使用菜单创建具有三个默认标签的编辑器窗口文件。

1. 使用任何模板创建 Unity 项目。

2. 创建一个名为create-a-transition以存储此示例的文件。

3. 在该文件夹中，右键点击 项目（Project） 窗口，然后选择 创建>UI 工具包（Create UI Toolkit > 编辑器窗口（Editor Window） 。

4. 在“C#”框中，输入TransitionExample. 这将创建以下文件：

   • TransitionExample.cs
   • TransitionExample.uss
   • TransitionExample.uxml

使用 UI Builder 创建过渡

在 UI Builder 中，使用“样式表”窗口为标签创建悬停样式，从而触发过渡。在标签上设置过渡，而不是悬停。如果在悬停时设置过渡，则如果光标离开标签，过渡将不起作用。

1. 打开TransitionExample.uxml在 UI Builder 中。

2. 在“样式表”窗口中，单击“添加新选择器”，然后输入Label:hover为标签添加悬停样式。

3. 按 Enter 键，然后在 USS 选择器列表中选择标签：悬停。

4. 在 Transform 部分的检查器一个Unity 窗口，显示有关当前选定游戏对象、资产或项目设置的信息，允许您检查和编辑值。更多信息
   请参阅术语表，请执行以下作以缩放和旋转标签：
   • 在“缩放”行中，将“X”值更改为1.1.
   • 在“旋转”行中，输入10.

5. 在“样式表”窗口中，单击“添加新选择器”，然后输入Label为标签添加样式。

6. 按 Enter 键，然后在 USS 选择器列表中选择标签。

7. 在 过渡动画（Transition Animations） 分段中，输入3在“持续时间”行中。

8. 保存并关闭 UI 生成器。 你TransitionExample.uss文件如下所示：

   .custom-label {
       font-size: 20px;
       -unity-font-style: bold;
       color: rgb(68, 138, 255);
   }
       
   Label:hover {
       scale: 1.1 1;
       rotate: 10deg;
   }
       
   Label {
       transition-duration: 3s;
   }
   

9. 在 Unity 中，选择“窗口> UI 工具包”>“转换示例”。

10. 将鼠标悬停在第二个和第三个标签上。标签在三秒钟内旋转并增大。

使用 C# 脚本创建转换

在 C# 中，为第一个标签创建与上一节相同的转换。使用指针事件触发转换。

1. 打开TransitionExample.cs在文本编辑器中。

2. 替换TransitionExample.cs替换为以下内容：

   using UnityEditor;
   using UnityEngine;
   using UnityEngine.UIElements;
   using System.Collections.Generic;
   
   public class TransitionExample : EditorWindow
   {
       [SerializeField]
       VisualTreeAsset m_VisualTreeAsset;
   
       [MenuItem("Window/UI Toolkit/TransitionExample")]
       public static void ShowExample()
       {
           TransitionExample wnd = GetWindow<TransitionExample>();
           wnd.titleContent = new GUIContent("Transition Example");
       }
   
       public void CreateGUI()
       {
           // Each editor window contains a root VisualElement object.
           VisualElement root = rootVisualElement;
   
           // VisualElements objects can contain other VisualElement following a tree hierarchy.
           cSharpLabel = new Label("Hello World! From C#");
           root.Add(cSharpLabel);
   
           // Create transition on the new Label.
           cSharpLabel.style.transitionDuration = new List<TimeValue>{ new TimeValue(3) };
   
           // Record default rotate and scale values.
           defaultRotate = cSharpLabel.resolvedStyle.rotate;
           defaultScale = cSharpLabel.resolvedStyle.scale;
   
           // Set up event handlers to simulate the use of the :hover pseudo-class.
           cSharpLabel.RegisterCallback<PointerOverEvent>(OnPointerOver);
           cSharpLabel.RegisterCallback<PointerOutEvent>(OnPointerOut);
   
           // Instantiate UXML
           VisualElement labelFromUXML = m_VisualTreeAsset.Instantiate();
           root.Add(labelFromUXML);
       }
   
       // The Label created with C#.
       VisualElement cSharpLabel;
   
       // The default rotate and scale values for the new Label.
       Rotate defaultRotate;
       Scale defaultScale;
   
       void OnPointerOver(PointerOverEvent evt)
       {
           SetHover(evt.currentTarget as VisualElement, true);
       }
   
       void OnPointerOut(PointerOutEvent evt)
       {
           SetHover(evt.currentTarget as VisualElement, false);
       }
   
       // When the user enters or exits the Label, set the rotate and scale.
       void SetHover(VisualElement label, bool hover)
       {
           label.style.rotate = hover ? new(Angle.Degrees(10)) : defaultRotate;
           label.style.scale = hover ? new Vector2(1.1f, 1) : defaultScale;
       }
   
       // Unregister all event callbacks.
       void OnDisable()
       {
           cSharpLabel.UnregisterCallback<PointerOverEvent>(OnPointerOver);
           cSharpLabel.UnregisterCallback<PointerOutEvent>(OnPointerOut);
       }
   }
   

3. 在 Unity 中，选择“窗口> UI 工具包”>“转换示例”。

4. 将鼠标悬停在第一个标签上。标签在三秒钟内旋转并增大。

其他资源

• USS 过渡