ステート遷移の使用¶
アプリケーションの状態が変化したとき、例えばユーザーがボタンをクリックしたときに、ステートマネージャーがどのように反応するかを定義するために、ステート遷移を使用します。例えば、次のことができます:
遷移の期間と開始時間を定義する
ユーザーが遷移を中断できるかどうかを定義します。
カスタムアニメーションを使用します。ステート遷移でカスタムイージング関数を使用する を参照してください。
任意の状態間の遷移を設定する¶
ステートを作成すると、ステートマネージャーはデフォルトのトランジションを使用してステート間を遷移します。
任意の状態間で遷移を設定するには:
ノードを作成し、そのノードにステートマネージャーを使用するように設定します。ステートマネージャー (State Managers) を使用する場合 または チュートリアル: トグルボタンの作成 を参照してください。
例えば、トグルボタンと、On と Off のステートを持つステートグループを含むステートマネージャーを作成します。
State Tools で Transition Editor をクリックして State Transition Editor を開きます。
新しいトランジションを作成するには、既存のトランジションの下にある + Create Transition をクリックします。
State Transition Editor を初めて開くと、そのステートグループ内のすべてのステート間で使用されるトランジションが表示されます。トランジションの詳細を確認するには、
の上にマウスポインターを移動させてください。
ポップアップウィンドウで設定します:
Duration をミリ秒単位の遷移の長さにします。
Duration エリアでクリックしてドラッグするか、新しい値を入力して、トランジションの期間を設定します。
Allow interrupt または Always full time は、Kanzi が遷移の中断をどのように処理するかを設定します。
Always full time は、Duration に設定された全時間を使用して、中断が発生した後の状態に遷移します。
Allow interrupt は、割り込みが発生した後の状態に遷移するために、Duration に設定された残り時間のみを使用します。
Configure Animations は、トランジションの詳細をさらに定義することを可能にします。State Transition Settings ウィンドウで設定します。
Start Time は、トランジションが開始するまでに経過するミリ秒単位の時間です。
Direction が Start State から End State への遷移に適用されるか、または両方の状態からの遷移に適用されるかどうか:
Unidirectional は、Start State から End State への遷移にのみ遷移を適用します。
Bidirectional は、Start State から End State への遷移、および End State から Start State への遷移に適用されます。
Easing Function は、遷移の曲線を定義するイージング関数を設定します。
UI要素をよりリアルにするために、イージング関数を使用します。現実の物体は決して即座に開始または停止しないため、適切なイージング関数を使用することで、より快適なユーザー体験を作り出すことができます。
最も適したイージング関数を選択してください。
イージング関数の画像にカーソルを合わせると、それが作成するアニメーションのタイプが表示されます。
戻る
イーズイン (Ease in)
イーズアウト (Ease out)
イーズインアウト
バウンス
イーズイン (Ease in)
イーズアウト (Ease out)
イーズインアウト
サークル
イーズイン (Ease in)
イーズアウト (Ease out)
イーズインアウト
キュービック
イーズイン (Ease in)
イーズアウト (Ease out)
イーズインアウト
エラスティック
イーズイン (Ease in)
イーズアウト (Ease out)
イーズインアウト
エクスポネンシャル
イーズイン (Ease in)
イーズアウト (Ease out)
イーズインアウト
リニア
イーズイン、イーズアウト、イーズインアウト
パワー
イーズイン (Ease in)
イーズアウト (Ease out)
イーズインアウト
二次
イーズイン (Ease in)
イーズアウト (Ease out)
イーズインアウト
Quartic
イーズイン (Ease in)
イーズアウト (Ease out)
イーズインアウト
Quintic
イーズイン (Ease in)
イーズアウト (Ease out)
イーズインアウト
サイン
イーズイン (Ease in)
イーズアウト (Ease out)
イーズインアウト
スムーザーステップ
イーズイン、イーズアウト
イーズインアウト
スムーズステップ
イーズイン、イーズアウト
イーズインアウト
ステップ
イーズイン、イーズアウト
イーズインアウト
Easing Mode は、イージング関数がトランジションにどのように適用されるかを定義します。
Ease in は、イージング関数をそのまま遷移に適用します。
Ease out はイージング関数の負の値を遷移に適用します。
Ease in-out は、遷移の前半にイージング関数をそのまま適用し、遷移の後半にイージング関数の負の値を適用します。
Transition Animations は、トランジションにカスタムアニメーションを使用できるようにします。ステート遷移でカスタムイージング関数を使用する を参照してください。
特定のステート間の遷移を設定する¶
特定の状態間でカスタムトランジションを設定できます。State Transition Editor キャンバスに状態を追加し、それらの間のトランジション設定を構成できます。
特定の状態間の遷移を設定するには:
State Transition Editor を右クリックし、Add State To Canvas を選択して、遷移を設定したいステートを選択します。
すべての状態を表示するには、右クリックして Add All States To Canvas を選択します。
ステートをクリックして選択し、Default トランジションをクリックして Custom トランジションを設定します。
マウスポインターを
トランジションの上に移動して、トランジションの詳細を確認してください。State Tools では、State Transition Editor で定義したトランジションが表示されます。トランジションの設定を編集するには、そのトランジションをクリックします。
ステート遷移でカスタムイージング関数を使用する¶
アニメーションを使用して、状態間の遷移のためのカスタムイージング関数を定義できます。例えば、電話の着信アラートがその状態に入ったときに点滅するようにカスタムイージング関数を定義します。
ステート遷移でカスタムイージング関数を使用するには:
ステートマネージャーを使用するノードを作成または選択します。ステートマネージャー (State Managers) を使用する場合 または チュートリアル: トグルボタンの作成 を参照してください。
例：
Image ノードを作成して、着信電話についてユーザーに通知する画像を表示します。
Image ノードに、Default と Incoming Call のステートを持つ1つのステートグループを持つステートマネージャーを作成し、各ステートに対して Image ノードの Opacity プロパティの値を追加して設定します。
Default ステートでは、それを0に設定します。これにより、電話が鳴っていないときに Default ステートで着信画像を非表示にします。
Incoming Call ステートではそれを1に設定します。これにより、電話が鳴っているときに Incoming Call ステートで着信画像を表示します。
Animation または Animation Clip リソースを作成します。このアニメーションを使用して、前のステップで作成したステートで使用するプロパティの値を変更します。キーフレームアニメーションの作成 を参照してください。
例えば、Library > Animations > Animation Data で、ノードの Opacity プロパティをアニメーションする Animation を作成します。このアニメーションを使用して、ノードが Incoming Call ステートに入るときにノードを3回点滅させます。
Node Tree で最初のステップで作成したノードを選択し、State Tools で Any -> Any をクリックして State Transition Settings を開きます。
State Transition Settings セット内で：
アニメーションさせたい遷移元の状態に Start State を設定します。
たとえば、それを Default に設定します。
アニメーションさせたい遷移先のステートである End State
たとえば、それを Incoming Call に設定します。
State Transition Settings の下部で
をクリックしてトランジションアニメーションを追加し、Transition Animations で設定します:アニメーションさせたいプロパティに Property Type します。
たとえば、それを Opacity に設定します。
Kanzi Studio は、Property Type のドロップダウンメニューに、Start State と End State の状態で異なる値を持つプロパティのみを表示します。
Easing Function から Custom へ
この手順で以前に作成したアニメーション Custom Animation に
たとえば、それを Animation に設定します。
イージング関数の設定¶
State Transition Settings のいくつかのイージング関数を設定して、遷移曲線を設定する関数内の値を定義することができます。
State Transition Settings で設定できるイージング関数は次の通りです。
Back
Amplitude プロパティを使用して、遷移曲線の振幅または深さを設定します。
Elastic
Oscillations プロパティを使用して、遷移曲線の振動の量を設定します。
Springiness プロパティを使用して、遷移曲線における振動の弾性を設定します。
Exponential
Exponent プロパティを使用して、遷移曲線が乗算するべき指数を設定します。
Power
Power プロパティを使用して、遷移曲線が加速する速度を設定します。
ステート間でのアニメーションのクロスフェード¶
ステートグループ内のステートに同じ名前の Animation Player ノードコンポーネントが含まれている場合、State Manager はトランジションのデュレーションにわたって、終了するアニメーションと開始するアニメーションを自動的にクロスフェードします。クロスフェードには、トランジションに設定されたイージングファンクションに関係なく、リニアブレンドが使用されます。
アニメーションのブレンディング を参照してください。