ステップ 1 - アニメーションを作成します。

Kanzi は、キーフレーム間でアニメーション化されたプロパティの値を徐々に変化させることによってキーフレームアニメーションを作成します。ノードの位置とサイズを定義する属性を持つ Render Transformation プロパティの値を変更するキーフレームアニメーションを作成する場合、移動キーフレームアニメーションを作成します。しかし、色などの他の任意の Kanzi プロパティの値を変更するキーフレームアニメーションを作成することもできます。

Kanzi では、Animation Clip および Animation Data アイテムでキーフレームアニメーションを作成します。より複雑なアニメーションを作成するには、アニメーションを Timeline Entry および Timeline Sequence アイテムに整理できます。アニメーション (Animations) を参照してください。

このチュートリアルのこのステップでは、キーフレームアニメーションを作成し、Animation Player を使用してアニメーションを再生します。

チュートリアルを入手する

チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Keyframe animations チュートリアルの横にある をクリックします。

Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。

• <KanziWorkspace>/Tutorials/Keyframe animations/Start ディレクトリにあるチュートリアルの開始地点のプロジェクト。

• <KanziWorkspace>/Tutorials/Keyframe animations/Completed ディレクトリにある完成したチュートリアル。

アニメーションを作成する

このセクションでは、BeachBall ノードを Ground ノードの上でバウンドさせるキーフレームアニメーションを作成します。

アニメーションを作成するには、以下のようにします。

1. Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Keyframe animations チュートリアルの横にある Open をクリックし、Start project を選択します。

   プロジェクトには、BeachBall Model ノードと Ground Plane ノードが含まれています。

   

2. Library > Animations > Animation Clips で、Animation Clip をダブルクリックして、Animation Clip Editor で開きます。

   

3. Animation Clip Editor で、Current Time を0に設定します。

   

4. Node Tree で BeachBall ノードを選択します。Properties から Render Transformation プロパティをドラッグし、Animation Clip Editor の Animation Clip にドロップします。

   このようにしてキーフレームを作成します。このキーフレームは、アニメーションの開始時の BeachBall ノードの位置を設定します（キーフレームには、BeachBall ノードの Render Transformation プロパティのアトリビュートの値が含まれます）。

   

5. Animation Clip Editor で、Current Time を0.45に設定します。Properties で、Render Transformation の Translation Y プロパティフィールドを 1 に設定し、Properties から Render Transformation プロパティを Animation Clip Editor の Animation Clip にドラッグします。

   このキーフレームは、BeachBall ノードが Ground ノードに到達したときの位置を設定します。

   

6. Current Time を0.5に設定し、BeachBall ノードをy軸でスケールして Ground ノードの真上に移動し、キーフレームを作成します。

   Scale アトリビュートの Uniform オプションを必ず無効にし、BeachBall ノードのy軸にのみスケーリングを適用してください。

   このキーフレームは、BeachBall ノードをy軸でスケールし（ボールが地面に当たるときに潰れます）、Ground ノードの真上に位置させます。

   

7. Current Time を0.55に設定し、BeachBall ノードのスケールを Ground ノードに当たる前の状態に戻して Ground ノードの真上に移動し、キーフレームを作成します。

   このキーフレームは、BeachBall ノードを元のサイズに戻し（ボールが跳ね返るときに形状を取り戻します）、Ground ノードの真上に配置します。

   

8. Current Time を1に設定し、BeachBall ノードを開始位置に移動して、キーフレームを作成します。

   このキーフレームは、BeachBall ノードをアニメーションの開始時の位置に戻します。

   

アニメーションを再生する

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

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

1. Node Tree で BeachBall ノードを選択します。Node Components で Alt を押しながら右クリック Animation から Animation Player を選択します。

   

2. Animation Player で、以下を設定します。

   • Target Animation Timeline を Animation Clip に。

   • Autoplay Enabled を有効にします。

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

   • Repeat Count Infinite を有効にします。

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

   

Preview で、BeachBall が Ground で跳ね返る様子を確認できます。

次のステップでは、アニメーションを微調整し、影が BeachBall の位置に反応するようにします。

はじめに 次のステップ

関連項目

Kanzi のキーフレームアニメーションについて詳しく知るには、アニメーション (Animations) を参照してください。

キーフレームアニメーションの再生について詳しくは、キーフレームアニメーションの使用 をご覧ください。

Kanzi Studio でのキーフレームアニメーション編集ツールについて詳しく知るには、アニメーションクリップ (Animation Clip) を編集する をご覧ください。

タイムラインシーケンスの操作について詳しくは、タイムラインシーケンスの編集 をご覧ください。