【Unity】VisualElement の Position などを Tween させる

UI Toolkit では experimental ですが、 Position や Rotation などを Tween させる機能があり
※ Version 1.0.0-preview.9

現状は

• Layout
• TopLeft
• Size
• Scale
• Position
• Rotation

を Tween させることができます

動かし方

Position の場合 VisualElement.experimental.animation.Position を呼び出すことで Tween させることができます

var box = new VisualElement();
// 時間の指定はms
// x100, y100 に2秒かけて移動させる
box.experimental.animation.Position(new Vector3(100, 100, 0), 2000);

Position を呼び出した際に ValueAnimation<Vector3> メソッドチェーンで Easing の指定や 終了時のコールバックの指定ができます

var ve = new VisualElement();
 
ve.experimental.animation.Position(new Vector3(0, 0, 0), 2000)
    // Easeing を指定
    .Ease(Easing.InQuad)
    // Animation 終了時の呼び出し
    .OnCompleted(() => Debug.Log("Complete"))
    // Animation 終了時でもインスタンスを破棄しない
    .KeepAlive();

また色々設定できたりもします

var ve = new VisualElement();
 
var anim = ve.experimental.animation.Position(new Vector3(0, 0, 0), 2000);
 
// 初期値の設定
anim.from = new Vector3(1, 0, 1);
// 再生中か
if (anim.isRunning)
{
}
 
// 毎フレームの呼び出し
anim.valueUpdated += (element, vector3) =>
{
    Debug.Log($"Update {vector3}");
}; 

サンプル

Roration や Scale は 現状 VisualElement の Pivot が左上から変更できないため動画のようになります

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class SampleWindow : EditorWindow
{
    [MenuItem("Window/Project/SampleWindow")]
    public static void ShowExample()
    {
        var wnd = GetWindow<SampleWindow>();
        wnd.titleContent = new GUIContent("SampleWindow");
    }

    public void OnEnable()
    {
        var root = rootVisualElement;

        var box = new VisualElement();

        box.transform.position = new Vector3(100, 100, 0);
        box.style.height = box.style.width = 20f;
        box.style.backgroundColor = Color.white;

        var btnPos = new Button(() =>
        {
            var pos = box.transform.position;
            pos.x += 10;
            box.experimental.animation.Position(pos, 2000);
        });
        btnPos.text = "Position";
        root.Add(btnPos);

        var btnRotate = new Button(() =>
        {
            var rot = new Vector3(0, 0, 90);
            box.experimental.animation.Rotation(Quaternion.Euler(rot), 2000);
        });
        btnRotate.text = "Rotation";
        root.Add(btnRotate);

        var btnScale = new Button(() =>
        {
            var anim = box.experimental.animation.Scale(2, 2000);
            anim.from = 1f;
        });
        btnScale.text = "Scale";
        root.Add(btnScale);

        root.Add(box);
    }
}