USS 遷移

USS 遷移は CSS 遷移と類似しています。USS 遷移では、特定の継続時間にわたってプロパティ値が変更されます。USS 遷移を使用して、ビジュアル要素の外観を変更するアニメーションを作成できます。例えば、UI 遷移を使用して、ユーザーがカーソルを合わせるとサイズや色が変わる UI 要素を作成できます。

UI Builder、USS ファイル、または C# スクリプトのコントロールを使用して、ビジュアル要素の遷移プロパティを設定できます。

以下の表は、遷移プロパティと、それらに対応する C# メソッドの一覧です。

プロパティ	C# メソッド	説明
transition-property	IStyle.transitionProperty	遷移が適用される USS プロパティ。
transition-duration	IStyle.transitionDuration	遷移の完了に要する時間。
transition-timing-function	IStyle.transitionTimingFunction	プロパティが時間経過とともに値間でどのように移動するか。
transition-delay	IStyle.transitionDelay	遷移の開始時刻。
transition		transition-property、transition-duration、transition-timing-function、transition-delay の略語表記。

遷移の開始

遷移は、スタイルに遷移継続時間を設定し、スタイルの値が変更された場合にトリガーされます。疑似クラス、C# メソッド、またはイベントを使用して遷移をトリガーできます。

ノート: フレーム上の遷移アニメーションは、プロパティの現在の状態が前の状態と異なる場合にトリガーされます。シーンの最初のフレームには以前の状態はありません。遷移アニメーションは最初のフレームの後に開始する必要があります。

以下の遷移例では、ラベルにカーソルを合わせたときのラベルの色と回転を変更しています。遷移の継続時間は 2 秒です。

この例を実装するには、以下の操作を行います。

1. ビジュアル要素の遷移プロパティを設定します。
2. 遷移の継続時間を設定します。
3. スタイルの開始値と終了値を設定します。

USS の例は以下のようになります。

/* Set the transition properties, duration, and start style values. */
.labelClass {
    transition-property: color, rotate;
    transition-duration: 2s;
    color: black;
}

/* The Label:hover triggers the transition. Set the end values for the trigger. */
.labelClass:hover {
    rotate: 10deg;
    color: red;
} 

ノート: 例では、:hover ではなく要素に遷移を設定しています。:hover で遷移を設定する場合、カーソルが要素から離れると遷移は機能しません。

C# イベントによる遷移のトリガー方法については、UI Builder と C# スクリプトによる単純遷移の作成を参照してください。

値の単位の一致

値と単位で設定するプロパティについては、単位が一致していることを確認してください。デフォルト値との間の遷移には特に注意してください。例えば、translate 属性のデフォルト値は 0px です。この値からパーセント値に遷移しようとすると、遷移は機能しません。

以下の遷移例では、ビジュアル要素を 2 秒間に 50px で左にオフセットしています。left プロパティのデフォルト値は auto です。遷移を機能させるには、単位を 0px に明示的に設定する必要があります。

USS の例は以下のようになります。

.boxClass:hover {
    left: 50px;
}

.boxClass {
    transition-property: left;
    transition-duration: 2s;
    transition-timing-function: ease-in-out-sine;
    left: 0px;
}

継承プロパティの遷移

階層内のビジュアル要素の場合、USS 遷移は CSS 遷移と同じように動作します。color などの継承プロパティに遷移を設定する場合、親要素に適用された遷移は子要素に連鎖します。継承されるプロパティについては、USS プロパティリファレンスを参照してください。

割り込み遷移

不完全な遷移が interruptedSame の場合、USS 遷移は CSS 遷移と同じように動作します。逆遷移の方が高速な場合があります。詳細については、中断された遷移の高速な反転を参照してください。

遷移イベント

遷移イベントは遷移によって生成されます。これらを使用して、遷移の開始と終了を検出できます。例については、遷移イベントの作成を参照してください。

使用方法のヒント

使用法のヒントには、最適化のための一連のプロパティが用意されています。これを使用して、描画呼び出しとジオメトリの再生成を削減できます。

ノート: 編集時、または要素をパネルに追加する前に、使用方法のヒントを設定します。遷移が始まると、欠落している関連の使用ヒントが自動的に追加され、すべてのフレームでジオメトリが再生成されることが回避される場合があります。ただし、VisualElement とその子孫のレンダリングデータが再生成されるため、1 フレームのパフォーマンスが低下します。

UI Builder での遷移コントロール

UI Builder の Inspector の遷移アニメーションセクションでコントロールを使用して、ビジュアル要素の遷移ルールを設定できます。ビジュアル要素に複数の遷移を設定できます。別の遷移を追加するには、Add Transition を選択します。遷移を削除するには、Remove (−) ボタンを選択します。

遷移プロパティ

遷移プロパティは、遷移が適用される USS プロパティを定義します。

Keywords

遷移プロパティは、以下のキーワードをサポートします。

• all: すべてのプロパティに遷移を適用し、それらより前の遷移をオーバーライドします。これがデフォルトの設定です。
• initial: すべてのプロパティに遷移を適用します。
• none: すべてのプロパティの遷移を無視します。
• ignored: 指定された継続時間、遅延、およびイージング機能の遷移を無視します。

アニメーション化可能度

ほとんどの USS プロパティに遷移を適用できます。ただし、特定のプロパティのアニメーション化可能度は異なります。USS プロパティのアニメーション化可能度は以下のカテゴリに分類されます。

• 完全にアニメーション化可能: 開始値から終了値への遷移を、イージング機能と遷移継続時間に従ったスピードでサポートします。
• 離散: 開始値から終了値までの 1 ステップでの値の遷移をサポートします。
• アニメーション化不可能: 遷移をサポートしません。

各プロパティのアニメーション化の可能性については、USS プロパティリファレンスを参照してください。

ノート: USS Transform プロパティで遷移を使用することをお勧めします。他の USS プロパティで遷移を使用できますが、これらのプロパティの値を変更することによってレイアウトが再計算される可能性があるため、フレームレートの低いアニメーションが生成される場合があります。各フレームでレイアウトを再計算すると、遷移アニメーションのフレームレートが低速化する場合があります。color、background-color、色合い、opacity などのすべての色プロパティには、ジオメトリの再生成を妨げる高速パスもあります。

USS の例

1 つの USS プロパティ、キーワード、またはカンマ区切りのリストを transition-property に指定できます。

transition-property: scale;
transition-property: translate, all, rotate;
transition-property: initial;
transition-property: none;

C# の例

IStyle.transitionProperty プロパティは StyleList<StylePropertyName> 型です。StylePropertyName は文字列から構築できる構造体です。StyleList は StylePropertyName のリストから構築できる構造体です。

//Create a list that contains the rotate property, and use it to set transitionProperty.
List<StylePropertyName> properties = new List<StylePropertyName>();
properties.Add(new StylePropertyName("rotate"));
//Given a VisualElement named "element"...
element.style.transitionProperty = new StyleList<StylePropertyName>(properties);

暗示的な変換を使用して、上記のコードを次のように簡略化できます。

//Given a VisualElement named "element"...
element.style.transitionProperty = new List<StylePropertyName> { "rotate" };

遷移の継続時間

遷移の継続時間によって、遷移の完了に要する時間が設定されます。

Keywords

遷移の継続時間は以下のキーワードをサポートします。

• initial: 継続時間を 0s に設定します。これがデフォルトの設定です。

USS の例

単位、キーワード、またはカンマ区切りの数字と単位のリストを transition-duration に指定できます。

transition-duration: 2s;
transition-duration: 800ms;
transition-duration: 3s, 1500ms, 1.75s;
transition-duration: initial;

複数の値を指定すると、各値は transition-property で指定された対応するプロパティに適用されます。以下の例では、スケールの元の継続時間は 1s ですが、all はそれを 2s にオーバーライドします。

transition-property: scale, all, rotate;
transition-duration: 1s, 2s, 3s;

C# の例

IStyle.transitionDuration プロパティは StyleList<TimeValue> 型です。TimeValue は、数値と TimeUnit enum から構築できる構造体です。StyleList は、TimeValue のリストから構築できる構造体です。

//Create a list that contains durations 2s and 500ms and use it to set transitionDuration.
List<TimeValue> durations = new List<TimeValue>();
durations.Add(new TimeValue(2f, TimeUnit.Second));
durations.Add(new TimeValue(500f, TimeUnit.Millisecond));
//Given a VisualElement named "element"...
element.style.transitionDuration = new StyleList<TimeValue>(durations);

暗示的な変換を使用して、上記のコードを次のように簡略化できます。

//Given a VisualElement named "element"...
element.style.transitionDuration = new List<TimeValue> { 2, new (500, TimeUnit.Millisecond) };

遷移タイミング関数

遷移タイミング関数は、プロパティが時間経過とともに値間でどのように移動するかを設定します。

Keywords

遷移タイミング関数は、以下のキーワードをサポートします。デフォルト値は initial であり、イージング関数を ease に設定します。

• initial
• 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

各関数の詳細については、transition-timing-function CSS 属性または easings.net に関する MDN のドキュメントを参照してください。

USS の例

イージング関数、キーワード、またはカンマ区切りのイージング関数のリストを transition-timing-function に指定できます。

transition-timing-function: linear;
transition-timing-function: ease-in, ease-out-circ, ease-in-out-cubic;
transition-timing-function: initial;

C# の例

IStyle.transitionTimingFunction プロパティは StyleList<EasingFunction> 型です。EasingFunction は、EasingMode enum から構築できる構造体です。

//Create a list that contains the Linear easing function, and use it to set transitionTimingFunction.
List<EasingFunction> easingFunctions = new List<EasingFunction>();
easingFunctions.Add(new EasingFunction(EasingMode.Linear));
//Given a VisualElement named "element"...
element.style.transitionTimingFunction = new StyleList<EasingFunction>(easingFunctions);

暗示的な変換を使用して、上記のコードを次のように簡略化できます。

//Given a VisualElement named "element"...
element.style.transitionTimingFunction = new List<EasingFunction> { EasingMode.Linear };

遷移の遅延

遷移の遅延は、遷移の開始時に設定されます。

Keywords

遷移の遅延は、以下のキーワードをサポートします。

• initial: 遅延を 0s に設定します。これがデフォルトの設定です。

USS の例

単位、キーワード、またはカンマ区切りの数字と単位のリストを transition-delay に指定できます。

transition-delay: 0s;
transition-delay: 300ms;
transition-delay: 2s, 650ms, 2.75s;
transition-delay: initial;

C# の例

IStyle.transitionDelay プロパティは StyleList<TimeValue> 型です。TimeValue は、数値と TimeUnit enum から構築できる構造体です。StyleList は、TimeValue のリストから構築できる構造体です。

//Create a list that contains delays 0.5s and 200ms, and use it to set transitionDelay.
List<TimeValue> delays = new List<TimeValue>();
delays.Add(new TimeValue(0.5f, TimeUnit.Second));
delays.Add(new TimeValue(200f, TimeUnit.Millisecond));
//Given a VisualElement named "element"...
element.style.transitionDelay = new StyleList<TimeValue>(delays);

暗示的な変換を使用して、上記のコードを次のように簡略化できます。

//Given a VisualElement named "element"...
element.style.transitionDelay = new List<TimeValue> { 0.5f, new(200, TimeUnit.Millisecond) };

USS transition

1 つの遷移、キーワード、またはカンマ区切りの遷移リストを transition に指定できます。遷移内のプロパティは、以下の順序でスペースによって区切ります。

1. transition-property
2. transition-delay
3. transition-duration
4. transition-timing-function

Keywords

transition では、 各遷移プロパティの初期値を表すキーワード initial のみがサポートされます。

• transition-delay: 0s
• transition-duration: 0s
• transition-property: all
• transition-timing-function: ease

USS の例

/*One transition*/
transition: width 2s ease-out;

/*Two transitions*/
transition: margin-right 4s, color 1s;

複数プロパティの遷移例

このセクションでは、複数のプロパティに遷移を適用する例を紹介します。

例 1

この例では、scale と transform-origin のプロパティに遷移を適用します。

• 最初の遷移は scale プロパティに適用されます。4s の継続時間、0s の遅延、および ease-in-sine イージング関数が設定されています。
• 2 番目の遷移は transform-origin プロパティに適用されます。3s の継続時間、600ms の遅延、および ease-out-elastic イージング関数が設定されています。

.classA {
    transition-property: scale, transform-origin;
    transition-duration: 4s, 3s;
    transition-delay: 0s, 600ms;
    transition-timing-function: ease-in-sine, ease-out-elastic;
}

例 2

この例では、all キーワードが設定された遷移を含め、後の遷移が前の遷移をオーバーライドします。

• 最初の遷移はすべてのプロパティに適用されます。継続時間 500 ミリ秒、遅延 0 秒、およびlinear イージング関数を適用します。
• 2 番目の遷移は translate プロパティに適用されます。1s の継続時間、1s の遅延、および ease-in イージング関数で遷移をオーバーライドします。その他すべてのプロパティには、500ms の継続時間、0s の遅延、および linear イージング関数が引き続き設定されます。

.classB {
    transition-property: all, translate;
    transition-duration: 500ms, 1s;
    transition-delay: 0s, 1s;
    transition-timing-function: linear, ease-in;
}

例 3

この例では、プロパティ値リストの長さが異なる場合の動作を示します。プロパティの値のリストが transition-property の値のリストよりも短い場合、Unity はその値を繰り返して一致させます。同様に、プロパティの値リストが transition-property よりも長い場合、Unity はそれを切り捨てます。

.classC {
    transition-property: scale, rotate, translate;
    transition-duration: 1s, 2s;
    transition-delay: 1s, 2s, 3s, 4s, 5s, 6s, 7s;
}

以下の表は、上記の例の最終結果を示しています。

プロパティ	Duration	Delay	イージング関数
scale	1s	1s	ease
rotate	2s	2s	ease
translate	1s	3s	ease

重要: transition-property、transition-duration、transition-delay、および transition-timing-function は個別の USS プロパティです。これらのいずれかを未定義のままにしておくと、別の USS 規則や UXML 要素のインラインなど、別の場所で定義される可能性があります。

追加リソース

• 使用方法のヒントを使用して、描画呼び出しとジオメトリの再生成を削減
• CSS 遷移の使用 (Mozilla 開発者ドキュメント)
• CSS 遷移 (Mozilla 開発者ドキュメント)
• CSS 遷移プロパティ (Mozilla 開発者ドキュメント)
• CSS 遷移継続時間プロパティ (Mozilla 開発者ドキュメント)
• CSS 遷移タイミング関数プロパティ (Mozilla 開発者ドキュメント)
• CSS 遷移遅延プロパティ (Mozilla 開発者ドキュメント)