第 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. 在动画画布中,点击并拖动前两个关键帧周围的区域,以选中前两个关键帧。

    选中的关键帧变为白色。

    第一个关键帧定义 BeachBall 节点的起始位置,第二个关键帧定义 BeachBall 撞击 Ground 节点时的位置。您需要更改这两个关键帧之间的缓动函数,以使动画更流畅。

    ../../_images/select-first-two-keyframes.png
  4. 在 Animation Clip Editor 左侧面板中,将 Easing 设置为 Smooth Step。

    ../../_images/select-bezier-interpolation-type.png
  5. 使用 Move tool image2 选择最后两个关键帧,并将 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。

    通过此绑定,您可以使用 BeachBall 节点在 y 轴上的位置来控制 Ground 节点在 x 轴上的缩放:BeachBall 节点越高,地面节点上的阴影纹理就越大。

    小技巧

    您可以右键单击某个属性并选择 Create Binding,开始为该属性创建绑定。

    这样,您会自动将该属性添加到 Binding Editor 中。

    ../../_images/properties-create-binding.png
    ../../_images/ground-scale-x-binding.png
  2. 在 Properties 中,单击 + Add Binding 以添加另一个绑定。使用与上一步相同的绑定表达式,但绑定到 Render Transformation 属性的 Scale Y 属性字段,而不是 Scale X 属性字段。

    该绑定和上一步骤中的绑定之间的唯一区别在于,通过此绑定,您可以绑定 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)
      

    通过此绑定,您可以通过 BeachBall 节点在 y 轴上的位置来控制 Ground 节点上阴影纹理的强度:BeachBall 节点越高,地面节点上的阴影纹理就越弱。此绑定使用 mix 函数来调整 Blend Intensity 属性的最终值。您可以使用其他绑定函数来调整该值。请参阅 Bindings expressions 参考。

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

接下来该做什么?

在本教程中,您学习了如何在 Kanzi Studio 中创建一个简单的关键帧动画。现在您可以学习如何:

另请参阅

要了解有关在关键帧动画中使用缓动函数的更多信息,请参阅 设置关键帧之间的缓动函数。

要详细了解有关创建 Kanzi 应用程序的信息,请参阅 教程。

要了解更多关于如何在 Kanzi 中控制动画播放的信息,请参阅 使用关键帧动画。

要了解有关 Kanzi 中动画的更多信息,请参阅 动画 (Animations)。

要了解有关 Kanzi Studio 功能的更多信息,请参阅 使用 …。