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

版本：2021.3+

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

示例概述

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

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

先决条件

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

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

创建编辑器窗口文件

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

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

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

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

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

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

使用 UI Builder 创建过渡动画

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

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

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

3. 按 Enter 键，然后在 USS 选择器列表中选择Label:hover。

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

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

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

7. 在过渡动画部分中，在持续时间行中输入 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 中，选择窗口 > 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 过渡动画