版本：2021.3+
此示例演示过渡事件的生命周期。
该示例将创建一个带有按钮和调色板的自定义 Editor 窗口。如果单击按钮，则会显示以下内容：
您可以在此 GitHub 代码仓库中找到此示例创建的完整文件。
本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发者。在开始之前，请熟悉以下内容：
使用任何模板在 Unity 中创建项目。
从菜单中选择资源 (Assets) > 创建 (Create) > UI 工具箱 (UI Toolkit) > Editor 窗口 (Editor Window)。
在 UI 工具箱 Editor 窗口创建工具 (UI Toolkit Editor Window Creator) 窗口中，输入 TransitionExample。
保存更改。这会创建三个文件：TransitionExample.cs、TransitionExample.uss 和 TransitionExample.uxml。
将 TransitionExample.cs 替换为以下内容：
using System;
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public class TransitionExample : EditorWindow
{
[SerializeField] private VisualTreeAsset m_VisualTreeAsset = default;
private Button clickMeButton;
private VisualElement colorChanger;
private Label eventLabel;
private Label timeLabel;
private DateTime lastEvent;
private static readonly TimeSpan NearlyInstantaneousThreshold = TimeSpan.FromMilliseconds(10);
private static readonly string ClickMeButtonClass = "click-me";
private static readonly string ColorChangerClass = "color-changer";
private static readonly string ColorChangerTransitionClass = "color-transition";
private static readonly string EventLabelName = "eventLabel";
private static readonly string TimeLabelName = "timeLabel";
private static readonly string TimeBelowThresholdText = "Almost instantaneous.";
[MenuItem("Window/UI Toolkit/Transition Example")]
public static void ShowExample()
{
TransitionExample wnd = GetWindow<TransitionExample>();
wnd.titleContent = new GUIContent("TransitionExample");
wnd.minSize = new Vector2(500f, 400f);
}
public void CreateGUI()
{
lastEvent = DateTime.Now;
// Each editor window contains a root VisualElement object
VisualElement root = rootVisualElement;
// Instantiate UXML
VisualElement uxmlAsset = m_VisualTreeAsset.Instantiate();
root.Add(uxmlAsset);
// Get the relevant elements by querying the root element
clickMeButton = root.Q<Button>(className: ClickMeButtonClass);
colorChanger = root.Q<VisualElement>(className: ColorChangerClass);
eventLabel = root.Q<Label>(name: EventLabelName);
timeLabel = root.Q<Label>(name: TimeLabelName);
// Add callbacks for clicking on the button and monitoring the color changing element.
clickMeButton.RegisterCallback<ClickEvent>(OnClickEvent);
colorChanger.RegisterCallback<TransitionRunEvent>(OnTransitionRun);
colorChanger.RegisterCallback<TransitionStartEvent>(OnTransitionStart);
colorChanger.RegisterCallback<TransitionEndEvent>(OnTransitionEnd);
colorChanger.RegisterCallback<TransitionCancelEvent>(OnTransitionCancel);
}
private void OnDisable()
{
clickMeButton.UnregisterCallback<ClickEvent>(OnClickEvent);
colorChanger.UnregisterCallback<TransitionRunEvent>(OnTransitionRun);
colorChanger.UnregisterCallback<TransitionStartEvent>(OnTransitionStart);
colorChanger.UnregisterCallback<TransitionEndEvent>(OnTransitionEnd);
colorChanger.UnregisterCallback<TransitionCancelEvent>(OnTransitionCancel);
}
private void OnClickEvent(ClickEvent evt)
{
colorChanger.ToggleInClassList(ColorChangerTransitionClass);
}
private void OnTransitionRun(TransitionRunEvent evt)
{
DisplayLatestEvent("TransitionRunEvent", DateTime.Now);
}
private void OnTransitionStart(TransitionStartEvent evt)
{
DisplayLatestEvent("TransitionStartEvent", DateTime.Now);
}
private void OnTransitionEnd(TransitionEndEvent evt)
{
DisplayLatestEvent("TransitionEndEvent", DateTime.Now);
}
private void OnTransitionCancel(TransitionCancelEvent evt)
{
DisplayLatestEvent("TransitionCancelEvent", DateTime.Now);
}
private void DisplayLatestEvent(string eventType, DateTime timestamp)
{
// If two events are sent too close together, add both to the Latest event line.
// This happens if the delay is set to 0 and the TransitionRun and TransitionStart
// are sent at the same time, or if the button was pressed before the transition
// was over, thus sending TransitionCancel and TransitionRun (and potentially
// TransitionStart) events close together.
var elapsed = timestamp - lastEvent;
if (elapsed <= NearlyInstantaneousThreshold)
{
timeLabel.text = TimeBelowThresholdText;
eventLabel.text += eventType;
}
else
{
timeLabel.text = $"{elapsed:s\\.ff} s";
eventLabel.text = eventType;
}
lastEvent = timestamp;
}
}
将 TransitionExample.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="TransitionExample.uss"/>
<ui:VisualElement class="main-container">
<ui:Button text="Click Me!" class="click-me"/>
<ui:VisualElement class="color-changer"/>
<ui:VisualElement class="label-section">
<ui:VisualElement class="label-line">
<ui:Label text="Latest event(s) : "/>
<ui:Label name="eventLabel"/>
</ui:VisualElement>
<ui:VisualElement class="label-line">
<ui:Label text="Time since last event : "/>
<ui:Label name="timeLabel"/>
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>
将 TransitionExample.uss 替换为以下内容：
.click-me {
width: 250px;
height: 50px;
font-size: 40px;
-unity-font-style: bold-and-italic;
margin: 30px;
}
.color-changer {
margin: 10px;
width: 150px;
height: 150px;
border-width: 10px;
border-radius: 75px;
background-color: rgb(0, 31, 138);
transition: background-color 3s ease-in-out 1s;
}
.main-container {
align-items: center;
justify-content: space-between;
flex-grow: 1;
background-color: rgb(60, 60, 60);
}
.label-section {
margin: 10px;
border-width: 2px;
width: 95%;
align-items: center;
}
.label-line {
flex-direction: row;
margin: 5px;
flex-grow: 1;
align-items: center;
width: 90%;
height: 25px;
font-size: 14px;
padding: 0;
}
.color-transition {
background-color: rgb(177, 221, 111);
}
选择 TransitionExample.cs 并将 TransitionExample.uxml 拖动到检视面板 (Inspector) 中的 Visual Tree Asset 字段（如果尚未存在）。
要尝试该示例，请从菜单中选择窗口 (Window) > UI 工具箱 (UI Toolkit) > 过渡示例 (Transition Example)。
单击按钮可查看颜色过渡和发送事件的描述。TransitionRunEvent 和 TransitionStartEvent 之间存在较长的延迟。在长持续时间内，可以再次单击按钮来中断过渡。