Unity3D

Unity3D ：转换事件

ygtu

May 23, 2023 • 7 min read

推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

转换事件

转换事件会通知您转换状态的更改。

UI 工具包在修改的属性时使用过渡。对属性的更改会立即直观地反映出来。但是，您可以使用过渡 USS 属性在初始结果和最终结果之间逐渐插值。VisualElementVisualElement

过渡的生命周期

转换的生命周期有以下阶段：

在以下情况下，将修改的属性：VisualElement

使用 C# 方法添加或删除类。例如：（其中是任何）。element.ToggleInClassList()elementVisualElement
将 USS 与选择器一起使用，例如。:hover
操作元素的属性。例如：（其中是任何）。styleelement.style.backgroundColor = Color.red;elementVisualElement

A 已发送。TransitionRunEvent
如果更改属性的已解析属性的值不是，则在延迟期间不会发生任何反应。transition-delay0
延迟后，发送 a，转换从属性的初始值开始。TransitionStartEvent
对于设置的时间长度，将发生转换。在此期间，属性从其初始值变为最终值。transition-duration
如果在转换期间将属性更改为新值，则发送。转换过程在步骤 2 重新启动。TransitionCancelEvent
经过后，该属性将设置为其最终值。A 已发送。transition-durationTransitionEndEvent

转换事件参考表

下表描述了转换事件及其传播阶段：

事件	描述	冒泡
转换运行事件	创建过渡时发送。	是的
转换启动事件	在过渡的延迟阶段结束且过渡开始时发送。	是的
转换结束事件	在过渡结束时发送。	是的
转换取消事件	取消转换时发送。	是的

行为

每个转换属性都有自己的生命周期和自己的转换事件。可以使用事件的属性访问当前属性。stylePropertyNames

如果更改了速记 USS 属性，则每个组件也会获得自己的生命周期。例如，如果您更改、、和，它们都会获得自己的、和，总共 12 个单独的事件。marginmargin-leftmargin-rightmargin-topmargin-bottomTransitionRunEventTransitionStartEventTransitionEndEvent

如果设置为，则将在几毫秒内一个接一个地发送和。transition-delay0TransitionRunEventTransitionStartEvent

如果设置为以下值，则转换不会从开头开始。例如，对于秒和秒，发送 and 时的属性设置为秒，并且过渡实际上从五秒动画的第三秒开始。transition-delay0transition-delay-3transition-duration5TransitionRunEventTransitionStartEventelapsedTime3

事件列表

本节介绍每个转换事件的、和。targetstylePropertyNameselapsedTime

转换运行事件

创建转换时发送事件。TransitionRunEvent

目标：执行转换的元素。
stylePropertiesNames：由过渡修改的属性列表。
已用时间：自转换开始以来的时间。

转换启动事件

当转换的延迟阶段结束并且转换开始时，将发送一个事件。TransitionStartEvent

目标：执行转换的元素。
stylePropertiesNames：由过渡修改的属性列表。
已用时间：自转换开始以来的时间。

转换结束事件

转换结束时将发送一个事件。TransitionEndEvent

目标：执行转换的元素。
stylePropertiesNames：由过渡修改的属性列表。
已用时间：自转换开始以来的时间。

转换取消事件

当转换被再次更改的属性中断时，将发送一个事件。TransitionCancelEvent

目标：执行转换的元素。
stylePropertiesNames：由过渡修改的属性列表。
已用时间：自转换开始以来的时间。

例子

以下示例演示了转换的生命周期。该示例创建一个带有按钮和调色板的自定义编辑器窗口。如果单击该按钮，将显示以下内容：

过渡开始将调色板从蓝色更改为绿色。
转换期间发送的转换事件。
事件的持续时间。

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

要创建示例，请执行以下操作：

使用任何模板在 Unity 中创建项目。
从菜单中，选择资产>创建> UI 工具包>编辑器窗口。
在用户界面
工具包编辑器窗口创建器窗口中，输入。TransitionExample
保存更改。这将创建三个文件，分别是、和。TransitionExample.csTransitionExample.ussTransitionExample.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/TransitionExample")]
    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 = $"{eventLabel.text}, {eventType}";
        }
        else
        {
            timeLabel.text = $"{elapsed:s\\.ff} s";
            eventLabel.text = eventType;
        }

        lastEvent = timestamp;
    }
}

6. 将的内容替换为以下内容：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>

7. 将的内容替换为以下内容：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);
}

8. 选择并拖动到TransitionExample.csTransitionExample.uxml可视化树
资产字段中的字段检查员
如果它还没有。

9. 若要查看示例，请选择“窗口> UI 工具包”>“过渡示例”。

10. 单击该按钮可查看颜色过渡和已发送事件的描述。和之间有很长的延迟。在较长时间内，您可以再次单击该按钮以中断过渡。TransitionRunEventTransitionStartEvent

由3D建模学习工作室整理翻译，转载请注明出处！

上一篇：Unity3D ：上下文菜单事件 (mvrlink.com)

下一篇:Unity3D ：IMGUI 事件 (mvrlink.com)