创建属性驱动的动画

当您想使用属性类型而不是时间来控制关键帧动画时,使用 Property Driven Animation Player。

例如,使用属性驱动的动画,您可以使用关键帧动画通过属性类型来控制仪表指针的位置。

../../_images/property-driven-animation.gif

要创建属性驱动的动画:

  1. 选择或创建一个关键帧动画。

    例如,要创建一个可用于旋转 2D 仪表指针的关键帧动画:

    1. 在 Animation Clip Editor 中,点击 Create Animation。

      ../../_images/create-animation.png
    2. 在 Properties 中,设置:

      • Target Property 到 Render Transformation (Node2D.RenderTransformation)

      • Property Field 到 Rotation Z

      ../../_images/animation-data-animation-library.png ../../_images/animation-properties.png
    3. 在 Animation Clip Editor 中,使用 Move tool image0 在画布区域中选择动画。

      ../../_images/animation-select-animation-animation-clip-editor.png
    4. 选择 Keyframe tool 关键帧,然后双击动画以创建两个关键帧。

      在此示例中,您创建了一个仅需要两个关键帧的线性动画。要创建更复杂的动画,请添加更多关键帧。

      ../../_images/animation-two-keyframes-animation-clip-editor.png
    5. 选择 Move tool move-tool,选择第一个关键帧并设置:

      • 将 Time 设为 0。

        在属性驱动的动画中,您可以通过在 Property Driven Animation Player 中选择的 Time Controller Property Type 来控制动画的时间。您在此过程的最后一步执行此操作。

      • 当控制器属性的值为0时,将 Value 设置为您想要设置动画目标属性或属性字段的值。

        在属性驱动的动画中,您可以使用 Value 属性控制此动画中设置的属性值。在此示例中,您可以控制 Node2D.RenderTransformation 属性、Rotation Z 属性字段的值。

        例如,将 Value 设为 -140。

        将值设置为 -140 时,动画会沿逆时针方向从其原始位置将仪表指针旋转 140 度。

      ../../_images/animation-set-first-keyframe-animation-clip-editor.png
    6. 在动画中选择第二个关键帧并设置:

      • 将 Time 设置为您想要控制动画的属性的最高可能值。

        例如,将 Time 设为 240。

      • 当控制器属性处于最高值时,将 Value 设置为您想要设置动画目标属性或属性字段的值。

        例如,将 Value 设为 100。

        将值设置为 100 时,动画会沿顺时针方向从其原始位置旋转仪表指针 100 度。

      ../../_images/animation-set-second-keyframe-animation-clip-editor.png
  2. 将您想要用于控制动画的属性添加到您想要通过属性驱动动画来控制的节点中。

    例如,要创建一个属性类型并使用它来控制速度指针的旋转:

    1. 在 Library 中,按 Alt 并右键单击 Property Types 并选择 Property Type。

      ../../_images/create-property-type.png
    2. 在 New Property Type 窗口中设置:

      • Name 到 Gauges.Speed

      • Display Name 到 Speed

      • Data Type 到 Float

      • 将 Lower Bound 设置为 0。

      • 将 Upper Bound 调整到您的速度表中的最高值。

        例如,将其设为 240。

      • Slider Step 到 1

      ../../_images/speed-custom-property.png
    3. 在 Node Tree 中选择您想要通过属性驱动动画来控制的节点。

      例如,选择显示您要旋转的速度指针的 Image 节点。

      ../../_images/speed-needle.png

      小技巧

      在 Kanzi 中,默认情况下,所有 2D 节点的原点位于节点的左上角。要设置您希望围绕其旋转节点的原点,请在 Properties 中添加 Render Transformation Origin 属性并设置其属性字段:

      • X 到您想要在 x 轴上设置原点的节点宽度百分比。

      • 将 Y 设置为您想要在 y 轴上设置原点的节点高度的百分比。

      ../../_images/render-transformation-origin1.png
    4. 在 Properties 中添加您想要用来控制动画的属性。

      例如,添加您创建的 Speed 属性。

      您必须将要用于控制动画的属性添加到要在其中使用 Property Driven Animation Player 的节点。

      ../../_images/add-speed-property1.png
  3. 在 Node Components 按 Alt 并右键单击 Animation 中,选择 Property Driven Animation Player。

    ../../_images/add-property-driven-animation-player.png
  4. 在您创建的 Property Driven Animation Player 中设置:

    • Target Animation Timeline 到您想要用于此属性驱动动画的 Animation Data、Animation Clip 或 Timeline Sequence。

      例如,选择您在这个过程的第一步中创建的动画。

    • 将 Time Controller Property Type 设置为您希望动画使用的属性类型,而不是时间。

      例如,选择您创建的 Speed 属性类型。

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

当您更改在 Time Controller Property Type 中设置的属性值时,Property Driven Animation Player 会更改动画中设置的属性和属性字段的值。在此示例中,Property Driven Animation Player 更改 Render Transformation 属性 Rotation 属性字段以旋转 SpeedNeedle 节点。

../../_images/property-driven-animation.gif

在 API 中使用 Property Driven Animation Player

要创建一个 Property Driven Animation Player 并设置其时间轴和时间控制器属性:

// Create property driven animation player.
PropertyDrivenAnimationPlayerSharedPtr player = PropertyDrivenAnimationPlayer::create(domain, "player");
// Set timeline.
player->setTimeline(timeline);
// Set type name of time controller property.
player->setTimeControllerPropertyType(timePropertyType.getName());

要将 Property Driven Animation Player 附加到节点:

node->addNodeComponent(player);

有关详细信息,请参阅 PropertyDrivenAnimationPlayer 类。

另请参阅

插值属性值

使用缓动函数插值属性值

动画 (Animations)