アニメーションシステム (Animation System)

アニメーションシステムでは、再生制御、時間に応じてプロパティ値を変化させるアニメーションの作成、別プロパティ値に応じてプロパティ値を変化させるアニメーションの作成をする事ができます。

../_images/animation-system-banner.png

Kanzi アニメーションシステムは以下で構成されています:

  • アニメーションは、プロパティをどのようにアニメートするかを定義します。例えば、アニメーションは赤から緑への色のアニメートや、7から11への浮動小数点値のアニメートを定義します。Kanzi では、これらのタイプのアニメーションを作成できます。

    From-toアニメーションは、プロパティの値をどの値からどの値に変更するかを定義します。これらの値のいずれかを省略して、現在の値からアニメーションするか、プロパティの現在の値にアニメーションすることができます。From-toアニメーションは、アニメーションの変化率を定義するイージングカーブを使用します。Kanzi に付属するイージングカーブの1つを使用するか、自分で定義することができます。

    ../_images/from-to-animation.png

    キーフレームアニメーションで使用されるキーフレームは、プロパティ値と、アニメーションがその値に達する時点とを定義します。Kanzi では、線形、ステップ、およびベジエスプラインのキーフレームを作成できます。

    ../_images/keyframe-animation.png
  • タイムラインは、アニメーションを時間とアニメーションさせたいオブジェクトにマッピングします。アニメーション自体はオブジェクトをアニメーションさせるわけではなく、タイムラインがそれを行います。Kanzi では、次のタイプのタイムラインを作成できます。

    プロパティタイムラインは、オブジェクトのプロパティにアニメーションを適用します。例えば、Image ノードのレイアウトサイズを変更するには、プロパティタイムラインを使用してノードの Layout Width および Layout Height プロパティをアニメートします。

    ../_images/property-timeline.png

    プロパティフィールドタイムラインは、オブジェクトのプロパティの1つ以上のフィールドにアニメーションを適用します。例えば、Text Block ノード内のテキストの色を変更するために、各色チャンネルに別々のアニメーションを使用することができます。

    ../_images/property-field-timeline.png

    パラレルタイムラインは、Kanzi 同時に再生されるタイムラインをグループ化することができます。パラレルタイムラインは、最後のチャイルドタイムライン内のアニメーションが終了したときに終了します。このタイムラインを使用して、タイムラインのコレクションを整理し、タイムラインの構成を作成します。

    ../_images/parallel-timeline.png
  • アニメーションプレイヤーは、アクションで送信できるメッセージを受信し、トリガーで受信するメッセージを生成します。例えば、再生を開始、停止、または一時停止するためのメッセージを送信でき、アニメーションの再生が開始、停止、または完了したときにメッセージを受信することができます。

    Kanzi では、これらのアニメーションプレーヤーが利用可能です。

    ../_images/animation-player.png

    Animation Player。

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

    キーフレームアニメーションの使用 を参照してください。

    ../_images/float-value-accumulator.png

    Float Value Accumulator。

    浮動小数プロパティタイプまたはプロパティフィールドの値を、時間の経過とともに、またはフレームごとにインクリメントするには、Float Value Accumulator を使用します。

    プロパティタイプの値をインクリメントする を参照してください。

    ../_images/int-value-accumulator.png

    Int Value Accumulator。

    整数プロパティタイプの値を、時間の経過とともに、またはフレームごとにインクリメントするには、Int Value Accumulator を使用します。

    プロパティタイプの値をインクリメントする を参照してください。

    ../_images/property-driven-animation-player.png

    Property Driven Animation Player。

    キーアニメーションを制御するために時間の代わりにプロパティタイプを使用したい場合は、Property Driven Animation Player を使用します。

    プロパティ駆動のアニメーションを作成する を参照してください。

    ../_images/property-target-interpolator.png

    Property Target Interpolator。

    プロパティのターゲット値を動的に設定し、現在の値を時間をかけてターゲット値に補間したい場合は、Property Target Interpolator を使用します。

    プロパティ値の補間 を参照してください。

    ../_images/property-target-easing-interpolator.png

    Property Target Easing Interpolator。

    プロパティのターゲット値を動的に設定し、イージング関数を使用して現在の値をターゲット値に時間をかけて補間したい場合は、Property Target Easing Interpolator を使用します。イージング関数を使用すると、より快適なユーザーエクスペリエンスを提供するリアルなアニメーションを作成できます。

    イージング関数を使用してプロパティ値を補間する を参照してください。

プロパティタイムラインアニメーションの仕組み

プロパティタイムラインは、Kanzi プロパティマネージャーモディファイアスタックを使用します。Kanzi は、プロパティの基本値またはスタック内の前のモディファイア(別のアニメーションである可能性があります)にアニメーションを適用します。このようにして、同じプロパティに影響を与えるアニメーションをスタックすることができます。

アニメーションが終了すると、それは生き続けます。アニメーションを記述するオブジェクトは、修飾子が要求されたときにプロパティ値を提供できるように、まだ存在しています。オブジェクトに複数のアニメーションを適用するために Kanzi Engine APIを使用する場合、それらを削除する必要があります。そうしないと、リソースを消費し続けます。ステートマネージャーや Animation Player のような他のシステムは、アニメーションを自分自身で追跡するため、あなたが追跡する必要はありません。

ヒント

Kanzi Studio の Node Tree ウィンドウでは、ステートマネージャー、バインディング、データソースバインディング、またはアニメーションによってノードの一部のプロパティの値がオーバーライドされている場合、そのノードの横にインジケーターが表示されます。

../_images/node-override-notice.png

Kanzi Studio プロジェクト内のオーバーライドのソースに移動するには、オーバーライドインジケーターを右クリックし、コンテキストメニューから移動先のソースを選択します。

オブジェクトのアニメ化のワークフロー

オブジェクトのアニメを作成手順:

  1. 以下のようにアニメーションを作成します:

    • from-to アニメーションの場合、アニメ化するプロパティの開始値と終了値、アニメーションの期間、およびイージングカーブを設定します。

    • キーフレームアニメーションの場合、特定のプロパティに対するアニメーション波形にキーフレーム (変化点) を挿入し、補完方法に Linear、Step、Bezier を使用して作成します。

  2. タイムラインを作成します。

  3. アニメーションをタイムラインに関連付けます。

  4. アニメーションを再生します。

関連項目

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

アニメーション (Animations)

アニメーションのベストプラクティス

Kanzi の基本事項

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

プロパティ駆動のアニメーションを作成する

プロパティ値の補間

イージング関数を使用してプロパティ値を補間する