【Unity】【UI Toolkit】USS TransitionでVisual Elementのプロパティが変化した時にアニメーションさせる

UnityのUI ToolkitのUSS TransitionでVisual Elementのプロパティが変化した時にアニメーションさせる方法についてまとめました。

はじめに
単一のプロパティをアニメーションさせる
複数のプロパティをアニメーションさせる
transitionショートハンド
transition-timing-function一覧
UXML側（UI Builder）で設定する
スクリプトから設定する
参考

はじめに

UI ToolkitのUSS Transitionを使うと、Visual Elementの各プロパティが変化した時のアニメーションを指定できます。
例えば、イージングを使って徐々にサイズを大きくする、といったことができます。

本記事ではこのUSS Transitionの使い方についてまとめます。

まず準備としてUI Builderを使って、以下のように100 x 100pxのSampleという名前のVisual Elementと、その子にTextを配置したUIを作っておきます。

生成される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 style="flex-grow: 0;">
        <ui:VisualElement name="Sample" style="flex-grow: 1; width: 100px; height: 100px;">
            <ui:Label tabindex="-1" text="Sample" display-tooltip-when-elided="true" style="-unity-text-align: upper-right; -unity-font-style: bold; font-size: 9px; color: rgb(0, 0, 0);" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

さらにこれを表示するためのEditorWindowを作っておきます。

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

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

    // uss
    [SerializeField] private StyleSheet _style;

    private void OnEnable()
    {
        _layout.CloneTree(rootVisualElement);
        rootVisualElement.styleSheets.Add(_style);
    }

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

このスクリプトのInspectorから先ほど作ったUXMLファイルと、次節で作るUSSファイルをアサインし、Window > Exampleからウィンドウを開くことで動作を確認することができます。

単一のプロパティをアニメーションさせる

それではまずシンプルに一つのプロパティをアニメーションさせてみます。
以下は、scaleプロパティが変化した時に、0.1秒のディレイの後に500ミリ秒かけてease-in-outのイージングで補間しつつアニメーションをする設定です。

さらに、hover状態の時にscaleを2.0に変化させています。
つまりマウスカーソルがUIに乗ると、アニメーションしながらスケーリングが2倍になっていくという挙動になります。

#Sample {
    background-color: white;
    scale: 1.0;
    transition-property: scale;
    transition-duration: 500ms;
    transition-delay: 0.1s;
    transition-timing-function: ease;
}
#Sample:hover {
    scale: 2.0;
}

実行結果は以下の通りです。

見切れていますが、拡大していることがわかります。

なお各プロパティのデフォルト値は以下の通りで、デフォルトのままでよければ記述を省略できます。

transition-property: all（すべてのプロパティを対象とする）
transition-duration: 0s
transition-timing-function: ease
transition-delay: 0s

複数のプロパティをアニメーションさせる

複数のプロパティをアニメーションさせるには、transition-propertyを複数指定します。
以下の例では、scale、translate、rotate、background-colorをアニメーションさせています。

#Sample {
    background-color: lightpink;
    scale: 1.0;
    transition-property: scale, translate, rotate, background-color;
    transition-duration: 500ms;
    transition-delay: 0s;
    transition-timing-function: ease-in-out;
}
#Sample:hover {
    background-color: aquamarine;
    translate: 50px 50px;
    rotate: 180deg;
    scale: 2.0;
}

これを実行した結果は以下の通りです。

なお上記ではtransition-durationなどをすべてのプロパティに対してまとめて一つだけ設定していますが、以下のように個別に設定することもできます。

    transition-property: scale, translate, rotate, background-color;
    transition-duration: 500ms, 1s, 2s, 5s;

なお、以下のようにプロパティの数と個数が合わない場合には、値がリピートして使われます。
以下の例の場合、scaleのtransition-durationは500ms、translateは1s、rotateは500ms、background-colorは1sになります。

    transition-property: scale, translate, rotate, background-color;
    transition-duration: 500ms, 1s;

transitionショートハンド

transitionを使うと以下のように省略した書き方ができます。

#Sample {
    background-color: lightpink;
    scale: 1.0;
    transition: scale 500ms ease 0s, translate 500ms ease 0s, rotate 500ms ease 0s, background-color 500ms ease 0s;
}
#Sample:hover {
    background-color: aquamarine;
    translate: 50px 50px;
    rotate: 180deg;
    scale: 2.0;
}

動作自体は前節のものと変わりません。

transition-timing-function一覧

transition-timing-functionには以下の値を設定できます。

ease
ease-in
ease-out
ease-in-out
linear
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-circ
ease-out-circ
ease-in-out-circ
ease-in-elastic
ease-out-elastic
ease-in-out-elastic
ease-in-back
ease-out-back
ease-in-out-back
ease-in-bounce
ease-out-bounce
ease-in-out-bounce

それぞれの動きについては以下のサイトを参照してください。

easings.net

UXML側（UI Builder）で設定する

UI BuilderのInspectorのTransition Animationsを使うと、UXML側にTransitionの設定を行うこともできます。

スクリプトから設定する

以下のように、スクリプトからTransitionの設定をすることもできます。

VisualElement element;
element.style.transitionProperty = new List<StylePropertyName> { "scale" };
element.style.transitionDuration = new List<TimeValue> { new (500, TimeUnit.Millisecond) };
element.style.transitionTimingFunction = new List<EasingFunction> { EasingMode.EaseInOut };
element.style.transitionDelay = new List<TimeValue> { new(100, TimeUnit.Millisecond) };

これに関しては詳細は割愛しますので、必要に応じてドキュメントを参照してください。

docs.unity3d.com

参考

easings.net

docs.unity3d.com