【Unity】【UI Toolkit】USS Transitionを使ってクリックした場所にアニメーションしながら移動するUIを作る

UnityのUI ToolkitのUSS Transitionを使ってクリックした場所にアニメーションしながら移動するUIを作る方法についてまとめました。

やりたいこと
UXMLを作成する
EditorWindowを作成する
実行結果
関連
参考

やりたいこと

UI ToolkitのUSS Transitionを使うと、Visual Elementが持つプロパティが変わった際に、そのVisual Elementがどのようにアニメーションして変化後のプロパティに遷移するかを設定できます。
USS Transitionの基礎知識については以下の記事にまとめています。

light11.hatenadiary.com

本記事では、USS Transitionのより具体的な使い方として、クリックした場所にアニメーションしながら移動するUIを作成します。

UXMLを作成する

まずUI BuilderでUXMLを作成します。
パネル全体を覆うBackgroundという名前の背景要素の上に、30 x 30pxの円形のUIをBallという名前で配置しています。

BallにはTransition Animationを下図のように設定しておきます。
これにより移動時にアニメーションをするようになります。
もちろんUSSで設定してもOKですが、今回は全部UXML側で設定しています。

出力される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">
    <ui:VisualElement name="Background" style="flex-grow: 1; background-color: rgb(255, 246, 220);">
        <ui:VisualElement name="Ball" style="flex-grow: 0; background-color: rgb(255, 0, 0); width: 30px; height: 30px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; transition-property: translate; transition-duration: 700ms; transition-timing-function: ease-out-bounce;" />
    </ui:VisualElement>
</ui:UXML>

EditorWindowを作成する

次にこれを表示するEditorWindowを作成します。

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public sealed class ExampleWindow : EditorWindow
{
    // uxml
    [SerializeField] private VisualTreeAsset _layout;

    private void OnEnable()
    {
        _layout.CloneTree(rootVisualElement);
        var background = rootVisualElement.Q("Background");
        var ball = rootVisualElement.Q("Ball");

        background.RegisterCallback<ClickEvent>(evt =>
        {
            var targetPos = evt.localPosition;
            targetPos.x -= ball.layout.width / 2;
            targetPos.y -= ball.layout.height / 2;
            ball.transform.position = targetPos;
        });
    }

    [MenuItem("Window/Example")]
    private static void Open()
    {
        GetWindow<ExampleWindow>();
    }
}