插值属性值

当您想要动态设置属性的目标值并希望随时间将当前值插值到目标值时,使用 Property Target Interpolator。

例如,使用 Property Target Interpolator 来插值仪表指针的旋转到目标值,而不考虑其当前位置。

Property Target Interpolator 模拟了一个永不超调的弹簧阻尼系统的行为。您使用 Acceleration 属性来设置弹簧移动物体的力,并使用 Drag 属性来设置阻尼系数。Acceleration 属性的值越大,属性达到其新值的速度越快。Drag 属性的值越大,最大插值速度越低。

../../_images/interpolator-accelerator-and-drag.gif

通过完成教程学习如何使用 Property Target Interpolator。请参阅 教程:插值属性值。

插值属性的值

要插值一个属性的值:

  1. 在 Node Tree 中选择包含您要插值的属性的节点。

    例如:

    1. 在 Quick Start 窗口中,点击 Examples。在 Data source 教程旁边,点击 下载。

    2. 在 Data source 教程旁边,点击 Open 并选择 Completed project。

    3. 在 Node Tree 中选择 RootPage > Gauges > SpeedNeedle 节点。

      当数据源中的速度值发生变化时,您可以使用 Property Target Interpolator 将 SpeedNeedle 节点从其上一个位置逐渐移到当前位置。

      要了解如何创建该工程,请参阅 教程:创建仪表 和 教程:从数据源获取应用程序数据。

    ../../_images/end-of-step-3.png ../../_images/speedneedle.png
  2. 在 Node Components 按 Alt 并右键单击 Animation 中,选择 Property Target Interpolator。

    ../../_images/triggers-add-property-target-interpolator.png
  3. 在 Create Property Target Interpolator 对话框中设置:

    • 将 Interpolated Property Type 到您想要插值的属性。

      例如,选择 Transform 2D > Render Transformation 属性。如果您想插值数据类型不是浮点数的属性,请创建一个浮点属性类型,并将您想要插值的属性绑定到您创建的浮点属性。例如,使用这种方法如果您想插值 3D 节点的旋转。请参阅 插值 3D 节点的旋转角度。

    • Interpolated Field 到您在 Interpolated Property Type 中选择的属性的属性字段。

      例如,选择 Rotation Z 属性字段。

    ../../_images/create-property-target-interpolator1.png
  4. 要设置插值行为,在您创建的 Property Target Interpolator 中设置 Acceleration 和 Drag 属性。

    Property Target Interpolator 模拟了一个永不超调的弹簧阻尼系统的行为。您使用 Acceleration 属性来设置弹簧移动物体的力,并使用 Drag 属性来设置阻尼系数。Acceleration 属性的值越大,属性达到其新值的速度越快。Drag 属性的值越大,最大插值速度越低。

    例如,将 Acceleration 设置为 7,将 Drag 设置为 10。

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

    当您更改在 Interpolated Property Type 中设置的属性值时,Property Target Interpolator 会将当前值随时间插值到目标值。在此示例中,Property Target Interpolator 插值 Speed 属性的值以更改 Speed 指针的位置。要更改插值,请在 Property Target Interpolator 中调整 Acceleration 和 Drag 属性的值。

插值 3D 节点的旋转角度

要插值 3D 节点的旋转角度:

  1. 在 Library 按 Alt 并右键单击 Property Types 中,选择 Property Type,并创建一个浮点属性类型。

    例如,创建一个名为 Interpolator 的浮点属性类型。

    ../../_images/create-property-type.png ../../_images/create-interpolator.png
  2. 在 Node Tree 中选择或创建您想要插值其旋转的 3D 节点。

    例如,选择您工程中的速度仪表指针。

  3. 在 Node Components 按 Alt 并右键单击 Animation 中,选择 Property Target Interpolator。

    ../../_images/triggers-add-property-target-interpolator.png
  4. 在 Create Property Target Interpolator 对话框中,将 Interpolated Property Type 设置为您在第一步中创建的浮点属性类型。

    ../../_images/create-property-target-interpolator-interpolator.png
  5. 要设置插值行为,在您创建的 Property Target Interpolator 中设置 Acceleration 和 Drag 属性。

    Property Target Interpolator 模拟了一个永不超调的弹簧阻尼系统的行为。您使用 Acceleration 属性来设置弹簧移动物体的力,并使用 Drag 属性来设置阻尼系数。Acceleration 属性的值越大,属性达到其新值的速度越快。Drag 属性的值越大,最大插值速度越低。

    ../../_images/property-target-interpolator-3d-rotation.png
  6. 在 Node Tree 中选择您想要插值其旋转的 3D 节点,在 Properties 中点击 + Add Binding,并在 Binding Editor 中设置:

    • Property 到 Render Transformation

    • Property Field 到 Rotation

    • Expression 到

      createRotationZ({@./Interpolator})
      

    单击 Save。

    ../../_images/interpolating-3d-rotation-binding-1.png
  7. 在 Properties 中,单击 + Add Binding,并在 Binding Editor 中设置:

    • 将 Property 设置为您在 Interpolated Property Type 中的 Property Target Interpolator 中设置的属性类型。

    • 将 Expression 到您想要控制旋转的属性。

      例如:

      • 如果从数据源获得了旋转角度值,请将其设置为要用于控制该旋转角度的数据对象。

      • 如果从工程中的另一个属性获得了旋转角度值,请将其设置为属性。

        备注

        如果此属性与包含 Property Target Interpolator 的节点相同,您只能在运行应用程序时看到插值,而不能在 Preview 中看到。

    单击 Save。

    ../../_images/interpolating-3d-rotation-binding-2.png

    当您更改用于控制旋转的属性的值时,Property Target Interpolator 会随着时间的推移逐渐将值更改为目标值。要更改插值,请在 Property Target Interpolator 中调整 Acceleration 和 Drag 属性的值。

获取关于插值完成的信息

当 Property Target Interpolator 完成其插值的属性的插值时,它会发送一条消息。您可以拦截该消息以确定其插值的属性何时达到最终值。

要获取关于插值完成的信息:

  1. 创建并配置一个 Property Target Interpolator 用于您想要插值的属性。请参阅 插值属性的值。

  2. 在 Node Tree 中选择一个节点,您希望在该节点获取有关该 Property Target Interpolator 插值完成的信息。

    例如,如果您在 SpeedNeedle 节点中创建了 Property Target Interpolator,但想要获取有关 RootPage 节点中插值完成的信息,请选择 RootPage 节点。

    ../../_images/rootpage-speedneedle.png
  3. 在 Node Components 按 Alt 并右键单击 Triggers 中,选择 Message Trigger > Property Target Interpolator > Interpolation Completed。

    Interpolation Completed 触发器拦截 Property Target Interpolator 在完成插值其插值的属性值时发送的消息。

    ../../_images/add-interpolation-completed-trigger.png
  4. 在您创建的 Interpolation Completed 触发器中,将 Message Source 属性设置为具有 Property Target Interpolator 的节点,以便您想知道它何时完成插值。

    例如,如果您想在 RootPage 节点中找出 Property Target Interpolator 何时在 SpeedNeedle 中完成插值属性,请将 Message Source 设置为 SpeedNeedle 节点。

    ../../_images/interpolation-completed-trigger-settings-speedneedle-.png
  5. 在 Interpolation Completed 触发器中创建您要执行的操作。

    当 Property Target Interpolator 发送有关插值完成的消息时,此触发器将执行您选择的操作。

    例如,添加 Animation Player > Start 操作以启动动画,或添加 Set Property 操作以设置属性的值。

    ../../_images/node-components-property-target-interpolator-completed-start.png

在 API 中使用 Property Target Interpolator

要创建 Property Target Interpolator 并设置其目标属性和插值设置:

// Create property target interpolator.
PropertyTargetInterpolatorSharedPtr interpolator = PropertyTargetInterpolator::create(domain, "player");
// Set type name of property which should be interpolated on the node where interpolator will be attached.
interpolator->setInterpolatedPropertyType(Node2D::OpacityProperty.getName());
// Adjust interpolation settings.
interpolator->setAcceleration(2.0f);
interpolator->setDrag(1.0f);

要将 Property Target Interpolator 附加到节点:

node->addNodeComponent(interpolator);

要创建属性目标插值时间线,并设置其目标属性和插值设置,请执行以下代码:

PropertyTargetInterpolationTimelineSharedPtr timeline = PropertyTargetInterpolationTimeline::create(domain, ".", Node2D::OpacityProperty, PropertyFieldWhole, 2.0f, 1.0f);

要为属性目标插值时间线创建回放,请执行以下代码:

SceneGraphTimelinePlaybackContext context(*node);
TimelinePlaybackSharedPtr playback = timeline->createPlayback(context);

要将属性目标插值时间线的回放添加到时钟,请执行以下代码:

domain->getRootTimelineClock()->addTimelinePlayback(playback);

有关详细信息,请参阅 PropertyTargetInterpolator、PropertyTargetInterpolationTimeline 和 PropertyTargetInterpolationTimelinePlayback 类。

另请参阅

教程:插值属性值

创建属性驱动的动画

使用缓动函数插值属性值

动画 (Animations)