キーフレームアニメーションの使用

Animation Player を使用して、キーフレームアニメーションの再生と再生制御を行います。

キーフレームアニメーションの再生

キーフレームアニメーションを再生するには:

  1. アニメーションのキーフレームを作成し、そのアニメーションでアニメートしたいノードを作成します。キーフレームアニメーションの作成 を参照してください。

  2. Node Tree でアニメーションさせたいノードを選択し、Node Components Alt を押しながら右クリック Animation で選択し、Animation Player を選択します。

    ../../_images/triggers-add-animation-player.png
  3. 作成した Animation Player で、使用したいアニメーションに Target Animation Timeline プロパティを設定します。

    ../../_images/animation-player-set-target-animation-timeline.png
  4. (オプション) で、Animation Player のアニメーション再生を設定します。

    • Autoplay Enabled は、Kanzi が Animation Player を持つノードをノードツリーにアタッチした後、アニメーションがすぐに開始するかどうかを設定します。

    • Relative Playback は、アニメーションで設定されたプロパティ値がターゲットノードのプロパティ値に追加されるか、これらのプロパティの値を置き換えるかを設定します。

    • Restore Original Values After Playback は、アニメーションが終了したときにアニメーション化されたプロパティの値が初期値に戻るかどうかを設定します。

      例えば、アニメーションするプロパティの初期値が0で、アニメーションの終了時に値が1になる場合、Restore Original Values After Playback プロパティを有効にすると、アニメーションが終了したときに Kanzi がアニメーションされたプロパティの値を0に戻します。

    • Playback Mode、Duration Scale、および Repeat Count は、アニメーションがどの方向に、どの速度で、何回再生されるかを設定します。

      アニメーションを再利用しやすくするために、これらの値を Animation Player に設定する代わりに、Dispatch Message Action > Animation Player > Start アクションでアニメーションを制御するトリガーにこれらの値を設定してください。キーフレームアニメーションの制御 を参照してください。

    ../../_images/animation-player-settings.png

キーフレームアニメーションの制御

トリガー内のアニメーション制御アクションを使用して、キーフレームアニメーションを制御できます。

キーフレームアニメーションを制御するには:

  1. キーフレームアニメーションを作成し、そのアニメーションでアニメーションさせたいノードを作成し、アニメーションさせたいノードに Animation Player を追加します。キーフレームアニメーションの再生 を参照してください。

  2. Node Tree で、前のステップで作成したノード内のキーフレームアニメーションを制御したい場所にノードを作成します。

    たとえば、Button ノードを作成します。

    ../../_images/button-to-control-animations.png
  3. Node Components > Triggers で、キーフレームアニメーションを制御するために使用したいトリガーを使用するか作成してください。

    例えば、Button > Click トリガーを使用します。

    ../../_images/button-click-trigger.png
  4. Node Components > Triggers Alt を押しながら右クリック で、キーフレームアニメーションを制御するために使用したいトリガーを選択し、Dispatch Message Action > Animation Player を選択してアクションを選択します。

    • Start がアニメーションを開始する

    • 実行中のアニメーションを一時停止するには、Pause を使用します。

    • 一時停止したアニメーションを再開するには、Resume を使用します。

    • 実行中または一時停止中のアニメーションを停止するための Stop

    ../../_images/animation-control-actions.png
  5. 作成したアニメーションコントロールアクションで、Target Item プロパティを、このアクションで制御したい Animation Player を含むノードに設定します。

    ノードが複数の Animation Player を含む場合、このアクションで制御したい Animation Player の名前を Target Node Component Name プロパティに設定します。

    ノード内のすべての Animation Player コンポーネントを制御したい場合は、Target Node Component Name プロパティを空のままにしてください。

    ../../_images/animation-player-action-settings.png
  6. アニメーションの再生を設定します:

    • Playback Mode プロパティは、Kanzi がアニメーションをどのように再生するかを設定します。

      • Normal はアニメーションで定義されている通りにアニメーションを再生します。

      • Ping pong は、アニメーションデータで定義されたアニメーションを最初に再生し、その後、アニメーションを逆再生します。

      • Reverse は、アニメーションで定義されたアニメーションを逆再生します。

    • Duration Scale プロパティは、アニメーションの持続時間を定義します。例えば:

      • 1に設定すると、アニメーションはアニメーションで定義されているのと同じ長さになります。

      • 0.5に設定すると、アニメーションはアニメーションで定義されている長さの半分になります。

      • 2に設定すると、アニメーションはアニメーションで定義されている長さの2倍になります。

    • Repeat Count はアニメーションが再生される回数を設定します。

      Repeat Count プロパティで Infinite プロパティを有効にすると、Animation Player はアニメーションを無限に再生します。

    Kanzi は、Animation Player で設定された値の上に、Animation Player > Start アクション内の Playback Mode、Duration Scale、および Repeat Count プロパティの値を適用します。

    例えば、Animation Player で Playback Mode プロパティが Reverse に設定され、Repeat Count プロパティが2に設定されている場合、そして Animation Player > Start アクションで Playback Mode プロパティが Ping pong に設定されている場合、Animation Player はアニメーションタイムラインを最初に逆再生で2回、その後通常モードで2回再生します。

アニメーションの状態に関する情報を取得する

Animation Player がアニメーションを開始、停止、または終了したときに、それが再生するアニメーションの状態を知るためにインターセプトできるメッセージを送信します。たとえば、これらのメッセージを使用してアニメーションを連鎖させることができます。

アニメーションの状態に関する情報を取得するには:

  1. キーフレームアニメーションを作成し、そのアニメーションでアニメーションさせたいノードを作成し、アニメーションさせたいノードに Animation Player を追加します。キーフレームアニメーションの再生 を参照してください。

  2. Node Tree で、Animation Player によって再生されるアニメーションに関する情報を取得したいノードを選択します。

    例えば、BeachBall ノードに Animation Player を追加したが、そのアニメーションに関する情報を RootPage ノードで取得したい場合は、RootPage ノードを選択します。

    ../../_images/rootpage-beachball.png
  3. Node Components Alt を押しながら右クリック Triggers で、Message Trigger > Animation Player を選択し、必要な情報を提供するメッセージトリガーを選択します。

    • Completed トリガーは、Animation Player がアニメーションを最後まで再生したときに送信するメッセージをインターセプトします。

    • Started トリガーは、アニメーションの再生を開始する際に Animation Player が送信するメッセージをインターセプトします。

    • Stopped トリガーは、アニメーションの再生を停止したときに Animation Player が送信するメッセージをインターセプトします。

    ../../_images/animation-player-messages.png
  4. 前のステップで作成したメッセージトリガーで、アニメーションの状態を確認したい Animation Player を持つノードに Message Source プロパティを設定します。

    例えば、Trigger Settings で Message Source を BeachBall ノードに設定する場合、RootPage ノード内の BeachBall ノードのアニメーションに関する情報を取得したいとき。

    ../../_images/animation-playback-started-trigger-settings-beachball.png
  5. 作成したトリガー内で、Animation Player がトリガーが受信するメッセージを送信したときに使用したいアクションを作成します。

    例えば、Animation Player > Start アクションを作成し、別のアニメーションを開始するように設定します。

    ../../_images/node-components-animation-player-completed-start.png

APIで Animation Player を使用する

Animation Player を作成し、そのタイムラインを設定するには:

// Create animation player.
AnimationPlayerSharedPtr animationPlayer = AnimationPlayer::create(domain, "player");
// Set timeline.
animationPlayer->setTimeline(timeline);

Animation Player をノードにアタッチするには:

node->addNodeComponent(animationPlayer);

アニメーションを開始するには、

// Start playback in animation player by sending PlayMessage
// to the node where animation player is attached.
AnimationPlayer::PlayMessageArguments playMessageArguments;
playMessageArguments.setPlaybackMode(Timeline::DirectionBehaviorReverse);
playMessageArguments.setDurationScale(2.0f);
playMessageArguments.setRepeatCount(2);
node->dispatchMessage(AnimationPlayer::PlayMessage, playMessageArguments);

アニメーションを一時停止するには:

// Pause playback in animation player by sending PauseMessage
// to the node where animation player is attached.
AnimationPlayer::PauseMessageArguments pauseMessageArguments;
node->dispatchMessage(AnimationPlayer::PauseMessage, pauseMessageArguments);

アニメーションを再開するには:

// Resume playback in animation player by sending ResumeMessage
// to the node where animation player is attached.
AnimationPlayer::ResumeMessageArguments resumeMessageArguments;
node->dispatchMessage(AnimationPlayer::ResumeMessage, resumeMessageArguments);

アニメーションを停止するには:

// Stop playback in animation player by sending StopMessage
// to the node where animation player is attached.
AnimationPlayer::StopMessageArguments stopMessageArguments;
node->dispatchMessage(AnimationPlayer::StopMessage, stopMessageArguments);

ノードから Animation Player をデタッチするには:

node->removeNodeComponent(*animationPlayer);

詳細については、AnimationPlayer クラスを参照してください。

関連項目

アニメーションクリップ (Animation Clip) を編集する

タイムラインシーケンスの編集

キーフレームアニメーションの作成

Kanzi Engine APIを使用してアニメーションとタイムラインを作成する

アニメーション (Animations)