遷移イベントは、遷移の状態の変化を知らせます。
UI Toolkit uses transitions when a VisualElement’s property is modified. Changes to VisualElement property are immediately reflected visually. However, you can use the transition USS property to interpolate between the initial and end results gradually.
遷移のライフサイクルには、以下のような段階があります。
VisualElement のプロパティが以下の場合に変更されます。
Add or remove a class with C# methods, such as element.ToggleInClassList() (where element is any VisualElement).
:hover のようなセレクターを使い USS を使用する場合。
Manipulate the element’s style property.
TransitionRunEvent が送信されます。
変更されたプロパティの解決された transition-delay プロパティが 0 以外の値を持つ場合、遅延時間の間は何も発生しません。
遅延後、TransitionStartEvent が送信され、初期値のプロパティ状態で遷移が開始されます。
transition-duration で設定された時間の間、遷移が発生します。その間に，プロパティは初期値から最終値へと移行します。
遷移中にプロパティが新しい値に変更された場合、TransitionCancelEvent が送信されます。遷移処理はステップ 2 から再開されます。
Transition-duration が経過すると、プロパティは最終的な値に設定されます。TransitionEndEvent が送信されます。
次の表は、遷移イベントとその伝播フェーズを説明したものです。
| イベント | 説明 | 下降伝播 | 上昇伝播 | キャンセル可能 |
|---|---|---|---|---|
| TransitionRunEvent | 遷移が作成されたときに送信されます。 | あり | ||
| TransitionStartEvent | 遷移の遅延段階が終了し、遷移が開始されるときに送信されます。 | あり | ||
| TransitionEndEvent | 遷移が終了するときに送信されます。 | あり | ||
| TransitionCancelEvent | 遷移がキャンセルされたときに送信されます。 | あり |
各遷移プロパティは独自のライフサイクルと独自の遷移イベントを持ちます。現在のプロパティにアクセスするには、イベントの stylePropertyNames プロパティを使用します。
ショートハンドの USS プロパティが変更されると、すべてのコンポーネントも独自のライフサイクルを取得します。例えば、margin、margin-left、margin-right、margin-top、margin-bottom を変更すると、これらのコンポーネントは独自の TransitionRunEvent 、TransitionStartEvent、TransitionEndEvent、つまり、合計 12 の個別のイベントを取得します。
transition-delay を 0 とすると、TransitionRunEvent と TransitionStartEvent が数ミリ秒のうちに次々と送信されます。
transition-delay を 0 以下の値に設定すると、遷移は最初からは開始されません。例えば、transition-delay を -3 秒、 transition-duration を 5 秒に設定すると、TransitionRunEvent と TransitionStartEvent は elapsedTime プロパティが 3 秒に設定された状態で送信され、5 秒のアニメーション の 3 秒目で遷移が開始されます。
ここでは、各遷移イベントの target、stylePropertyNames、elapsedTime について説明します。
TransitionRunEvent イベントは、遷移が作成されたときに送信されます。
target: 遷移を実行する要素。stylePropertyNames: 遷移によって変更されるプロパティのリスト。elapsedTime: 遷移開始からの時間。TransitionStartEvent イベントは、遷移の遅延段階が終了し、遷移が開始されると送信されます。
target: 遷移を実行する要素。stylePropertyNames: 遷移によって変更されるプロパティのリスト。elapsedTime: 遷移開始からの時間。TransitionEndEvent イベントは、遷移が終了したときに送信されます。
target: 遷移を実行する要素。stylePropertyNames: 遷移によって変更されるプロパティのリスト。elapsedTime: 遷移開始からの時間。TransitionCancelEvent イベントは、プロパティが再び変更されることによって遷移が中断されたときに送信されます。
target: 遷移を実行する要素。stylePropertyNames: 遷移によって変更されるプロパティのリスト。elapsedTime: 遷移開始からの時間。The following example demonstrates the lifecycle of a transition. The example creates a custom Editor window with a button and color palette. If you click the button, the following appears:
この例で作成するすべてのファイルは、GitHub リポジトリ にあります。
サンプルを作成するには以下を行います。
任意のテンプレートで Unity でプロジェクトを作成します。
Assets > Create > UI Toolkit > Editor Window を選択します。
UI Toolkit Editor Window Creator ウィンドウに、TransitionExample と入力します。
変更を保存します。これにより、TransitionExample.cs、TransitionExample.uss、TransitionExample.uxml という 3 つのファイルが作成されます。
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;
}
}
Replace the contents of TransitionExample.uxml with the following:
<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>
Replace the contents of TransitionExample.uss with the following:
.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 フィールドにドラッグします (まだそこにない場合)。
To see the example, select Window > UI Toolkit > Transition Example.
ボタンをクリックすると、色の遷移と送信されたイベントの説明が表示されます。TransitionRunEvent と TransitionStartEvent の間に長い遅延があります。長い遅延の間に、ボタンをもう一度クリックすると、遷移を中断できます。