ステップ2 - アニメーションを微調整する

前のステップでは、BeachBall が地面で跳ね返るアニメーションを作成しましたが、そのアニメーションは非常に硬い印象です。これは、アニメーションがキーフレーム間の遷移にリニア補間を使用しているためです。さまざまなイージングファンクションを使用して、異なるアニメーションを作成できます。

このステップでは、以下を行います。

  1. 使用されていない Animation Data アイテムを削除して、アニメーションをクリーンアップします。

  2. キーフレーム間のイージングファンクションを変更して、ボールのバウンドアニメーションを滑らかにします。

  3. 影が BeachBall の位置に反応するようにします。

アニメーションをクリーンアップする

プロパティを Animation Clip Editor にドラッグしてキーフレームを作成すると、Kanzi Studio は各プロパティフィールドの Animation Data アイテムを自動的に追加します。Render Transformation プロパティのうち Translation Y と Scale Y のプロパティフィールドのみを変更したため、その他の Animation Data アイテムはすべて削除できます。

../../_images/animation-data-items.png

Library の Animations > Animation Clips で、クリーンアップしたい Animation Clip アイテムを右クリックし、Delete Animations with One or Zero Effective Keyframes を選択します。

これは、アニメーションに必要な情報を含まないすべての Animation Data アイテムを削除します。

../../_images/delete-animations-with-one-or-zero-effective-keyframes1.png ../../_images/animation-data-items-cleaned-up.png ../../_images/animation-clip-editor-animation-cleaned-up.png

アニメーションをよりスムーズにする

このセクションでは、キーフレーム間のイージングファンクションを変更して、アニメーションを滑らかにします。

アニメーションをよりスムーズにするために：

  1. Animation Clip Editor で、Translation Y プロパティフィールドの Animation Data アイテムのみを選択します。

    ../../_images/select-translation-y-attribute.png

  2. マウスホイールを使用してアニメーションキャンバスをズームインし、image0 をクリックして Move tool を選択します。

    ../../_images/zoom-in.png

  3. アニメーションキャンバスで、最初の2つのキーフレームの周囲をクリックしてドラッグし、それらのキーフレームを選択します。

    選択したキーフレームは白色になります。

    最初のキーフレームは BeachBall ノードの開始位置を定義し、2番目のキーフレームは BeachBall が Ground ノードに当たるときの位置を定義します。これらが、アニメーションを滑らかにするためにイージングファンクションを変更するキーフレームです。

    ../../_images/select-first-two-keyframes.png

  4. Animation Clip Editor の左パネルで、Easing を Smooth Step に設定します。

    ../../_images/select-bezier-interpolation-type.png

  5. Move tool イメージ2 (image2) を使用して最後の2つのキーフレームを選択し、Easing を Smooth Step に設定します。

    ../../_images/select-bezier-interpolation-type-last-two-keyframe.png

  6. （オプション） 各キーフレームのキーフレームハンドルを調整することで、アニメーションの滑らかさをさらに調整できます。

    ループするアニメーションを作成する場合は、開始キーフレームと終了キーフレームの補間を対称にすると最良の結果が得られます。

    ../../_images/adjusting-the-tangent-handle.png

    キーフレームハンドルの調整方法について詳しくは、キーフレーム間のイージングファンクションの設定 を参照してください。

BeachBall の位置に影響するように影を設定します。

このセクションでは、Kanzi バインディングを使用して、Ground ノード上のシャドウテクスチャのサイズを、BeachBall ノードと Ground ノードの距離に接続します。BeachBall ノードが Ground ノードから遠くなると、シャドウを大きくしてより透明にします。

BeachBall の位置に影響を与えるように影を作成するには、

  1. Node Tree で Ground ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。

    • Property から Render Transformation へ

    • Property Field から Scale X へ

    • Expression へ

      {@../BeachBall/Node3D.RenderTransformation}.translationY + 0.4

    Save をクリックします。

    このバインディングを使用すると、Ground ノードのスケールを x 軸で、BeachBall ノードの位置を y 軸で制御します。BeachBall ノードが高くなるほど、地面ノード上のシャドウテクスチャが大きくなります。

    ../../_images/ground-scale-x-binding.png

  2. Properties で、+ Add Binding をクリックして別のバインディングを追加します。前のステップと同じバインディング式を使用しますが、Scale X プロパティフィールドではなく、Render Transformation プロパティの Scale Y プロパティフィールドにバインドします。

    このバインディングと前のステップのバインディングの唯一の違いは、このバインディングでは Ground ノードのスケールをy軸にバインドすることです。

    ../../_images/ground-scale-y-binding.png

  3. 別のバインディングを追加し、Binding Editor に設定します。

    1. Property から Blend Intensity へ

    2. Expression へ

      y = {@../BeachBall/Node3D.RenderTransformation}.translationY
mix(0.5, 0.0, y * 0.2)

    このバインディングを使用すると、Ground ノードの影テクスチャの強さを、BeachBall ノードのy軸上の位置で制御します。BeachBall ノードが高くなるほど、地面ノードの影テクスチャは弱くなります。このバインディングは、Blend Intensity プロパティの最終値を調整するために mix 関数を使用します。他のバインディング関数を使用して値を調整することもできます。バインディング式リファレンス を参照してください。

    ../../_images/ground-blend-intensity-binding.png

Previous step

次の作業

このチュートリアルでは、Kanzi Studio でシンプルなキーフレームアニメーションを作成する方法を学びました。次に、以下のことを学ぶことができます。

関連項目

キーフレームアニメーションでのイージングファンクションの使用について詳しくは、キーフレーム間のイージングファンクションの設定 を参照してください。

Kanzi アプリケーションの作成について詳しくは、チュートリアル を参照してください。

Kanzi でアニメーションの再生を制御する方法について詳しく学ぶには、キーフレームアニメーションの使用 を参照してください。

Kanzi のアニメーションについて詳しく知るには、アニメーション (Animations) をご覧ください。

Kanzi Studio の機能について詳しく知るには、...を使用する をご覧ください。