使用 UI Builder 和 C# 脚本创建简单过渡

Version:2021.3+

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

示例概述

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

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

先决条件

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

• UI Builder
• USS
• 伪类
• 处理事件

创建 Editor 窗口文件

使用菜单可以创建具有三个默认标签的 Editor 窗口文件。

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

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

3. 在文件夹中，右键单击项目 (Project) 窗口并选择创建 (Create) > UI 工具箱 (UI Toolkit) > Editor 窗口 (Editor Window)。

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

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

使用 UI Builder 创建过渡

在__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary Builder 中，使用 StyleSheets 窗口为标签创建悬停样式，标签会触发过渡。在标签而不是悬停上设置过渡。如果在悬停上设置过渡，当光标离开标签，过渡将不起作用。

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

2. 在 StyleSheets 窗口中，单击(Add new selector) 并输入 Label:hover 为标签添加悬停样式。

3. 按 Enter 并在 USS 选择器列表中选择 Label:hover。

4. 在 (Inspector) 的 Transform 部分中，执行以下操作来缩放和旋转标签：
   • 在 Scale 行中，将 X 值更改为 1.1。
   • 在 Rotate 行中，输入 10。

5. 在 StyleSheets 窗口中，单击添加新选择器 (Add new selector) 并输入 Label 为标签添加样式。

6. 按 Enter 并在 USS 选择器列表中选择标签 (Label)。

7. 在 Transition Animations 部分中，在 Duration 行输入 3。

8. 保存并关闭 UI Builder。您的 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 中，选择窗口 (Window) > UI 工具箱 (UI Toolkit) > 过渡示例 (Transition Example)。

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 中，选择窗口 (Window) > UI 工具箱 (UI Toolkit) > 过渡示例 (Transition Example)。

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

其他资源

• USS 过渡