使用关键帧动画

使用 Animation Player 播放和控制关键帧动画的播放。

播放关键帧动画

要播放关键帧动画:

  1. 创建一个关键帧动画和一个要使用动画对其进行动画化的节点。请参阅 创建关键帧动画。

  2. 在 Node Tree 中选择您要动画化的节点,在 Node Components 按 Alt 并右键单击 Animation 中,选择 Animation Player。

    ../../_images/triggers-add-animation-player.png
  3. 在您创建的 Animation Player 中,将 Target Animation Timeline 属性设置为您要使用的动画。

    ../../_images/animation-player-set-target-animation-timeline.png
  4. 在 Animation Player 中设置动画播放:(可选)

    • Autoplay Enabled 设置在 Kanzi 将具有 Animation Player 的节点附加到节点树后,动画是否立即开始。

    • Relative Playback 设置动画中设置的属性值是添加到目标节点中的属性值,还是替换这些属性的值。

    • Restore Original Values After Playback 设置动画结束时动画属性的值是否返回到其初始值。

      例如,如果您动画化的属性的初始值为 0 且值在动画化结束时为 1,则启用 Restore Original Values After Playback 属性时,Kanzi 会在动画结束时将动画化属性的值返回到 0。

    • Playback Mode、Duration Scale 和 Repeat Count 设置动画播放的方向、速度和次数。

      为了更容易地重用动画,不要在 Animation Player 中设置这些值,而是在触发器中设置这些值,通过该触发器在 Dispatch Message Action > Animation Player > Start 操作中控制动画。请参阅 控制关键帧动画。

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

控制关键帧动画

您可以在任何触发器中使用动画控制动作来控制关键帧动画。

要控制关键帧动画:

  1. 创建关键帧动画、一个您希望使用该动画进行动画处理的节点,并将 Animation Player 添加到您要进行动画处理的节点。请参阅 播放关键帧动画。

  2. 在 Node Tree 中创建一个节点,您希望在上一步中创建的节点中控制关键帧动画。

    例如,创建一个 Button 节点。

    ../../_images/button-to-control-animations.png
  3. 在 Node Components > Triggers 中使用或创建您想要用来控制关键帧动画的触发器。

    例如,使用 Button > Click 触发器。

    ../../_images/button-click-trigger.png
  4. 在 Node Components > Triggers 按 Alt 并右键单击 中,选择您要用于控制关键帧动画的触发器,选择 Dispatch Message Action > Animation Player 并选择一个动作:

    • Start 开始动画。

    • Pause 以暂停正在运行的动画。

    • Resume 以恢复暂停的动画。

    • Stop 用于停止正在运行或暂停的动画。

    ../../_images/animation-control-actions.png
  5. 在您创建的动画控制操作中,将 Target Item 属性设置为包含您要通过此操作控制的 Animation Player 的节点。

    如果节点包含多个 Animation Player,请将 Target Node Component Name 属性设置为您希望通过此操作控制的 Animation Player 的名称。

    如果您想控制节点中的所有 Animation Player 组件,请将 Target Node Component Name 属性留空。

    ../../_images/animation-player-action-settings.png
  6. 设置动画回放:

    • Playback Mode 属性设置 Kanzi 如何播放动画:

      • Normal 按照动画中定义的方式播放动画。

      • Ping pong 首先按照动画中定义的方式播放动画,然后反向播放动画。

      • Reverse 以相反的顺序播放动画中定义的动画。

    • Duration Scale 属性定义动画的持续时间。例如:

      • 当设置为 1 时,动画的持续时间与动画中定义的持续时间相同。

      • 当设置为 0.5 时,动画的持续时间是动画中定义的持续时间的一半。

      • 当设置为 2 时,动画的持续时间是动画中定义的持续时间的两倍。

    • Repeat Count 设置动画播放的次数。

      在启用 Infinite 属性时的 Repeat Count 属性中,Animation Player 无限次播放动画。

    Kanzi 在 Animation Player > Start 操作中应用 Playback Mode、Duration Scale 和 Repeat Count 属性的值,并覆盖在 Animation Player 中设置的值之上。

    例如:如果在 Animation Player 中,Playback Mode 属性设置为 Reverse,Repeat Count 属性设置为 2,并且在 Animation Player > Start 操作中,Playback Mode 属性设置为 Ping pong,则 Animation Player 首先以反向播放动画时间线两次,然后以正常模式播放两次。

获取关于动画状态的信息

当 Animation Player 开始、停止或到达其播放的动画的结尾时,它会发送消息,您可以拦截这些消息以了解该动画的状态。例如,您可以使用这些消息来链接动画。

要获取关于动画状态的信息:

  1. 创建关键帧动画、一个您希望使用该动画进行动画处理的节点,并将 Animation Player 添加到您希望进行动画处理的节点。请参阅 播放关键帧动画。

  2. 在 Node Tree 中选择一个节点,您希望在该节点获取有关由 Animation Player 播放的动画的信息。

    例如,如果将 Animation Player 添加到了 BeachBall 节点,但希望在 RootNode 节点中获取该动画的相关信息,请选择 RootNode 节点。

    ../../_images/rootpage-beachball.png
  3. 在 Node Components 按 Alt 并右键单击 Triggers 中,选择 Message Trigger > Animation Player,并选择提供所需信息的消息触发器:

    • Completed 触发器拦截 Animation Player 在播放动画到末尾时发送的消息。

    • Started 触发器拦截 Animation Player 在开始播放动画时发送的消息。

    • Stopped 触发器拦截 Animation Player 在停止动画播放时发送的消息。

    ../../_images/animation-player-messages.png
  4. 在您在上一步中创建的消息触发器中,将 Message Source 属性设置为具有 Animation Player 的节点,以便您想要找出动画的状态。

    例如,如果希望在 RootNode 节点中获取 BeachBall 节点的动画信息,请在 Trigger Settings 中将 Message Source 设置为 BeachBall 节点。

    ../../_images/animation-playback-started-trigger-settings-beachball.png
  5. 在您创建的触发器中,创建您要在 Animation Player 发送您的触发器拦截的消息时使用的操作。

    例如,创建一个 Animation Player > Start 动作,并将其设置为启动另一个动画。

    ../../_images/node-components-animation-player-completed-start.png

在 API 中使用 Animation Player

要创建一个 Animation Player 并设置其时间轴:

// Create animation player.
AnimationPlayerSharedPtr animationPlayer = AnimationPlayer::create(domain, "player");
// Set timeline.
animationPlayer->setTimeline(timeline);

要将 Animation Player 附加到节点:

node->addNodeComponent(animationPlayer);

要开始动画:

// Start playback in animation player by sending PlayMessage
// to the node where animation player is attached.
AnimationPlayer::PlayMessageArguments playMessageArguments;
playMessageArguments.setPlaybackMode(Timeline::DirectionBehaviorReverse);
playMessageArguments.setDurationScale(2.0f);
playMessageArguments.setRepeatCount(2);
node->dispatchMessage(AnimationPlayer::PlayMessage, playMessageArguments);

要暂停动画:

// Pause playback in animation player by sending PauseMessage
// to the node where animation player is attached.
AnimationPlayer::PauseMessageArguments pauseMessageArguments;
node->dispatchMessage(AnimationPlayer::PauseMessage, pauseMessageArguments);

要恢复动画:

// Resume playback in animation player by sending ResumeMessage
// to the node where animation player is attached.
AnimationPlayer::ResumeMessageArguments resumeMessageArguments;
node->dispatchMessage(AnimationPlayer::ResumeMessage, resumeMessageArguments);

要停止动画:

// Stop playback in animation player by sending StopMessage
// to the node where animation player is attached.
AnimationPlayer::StopMessageArguments stopMessageArguments;
node->dispatchMessage(AnimationPlayer::StopMessage, stopMessageArguments);

要从节点中分离 Animation Player:

node->removeNodeComponent(*animationPlayer);

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

在状态之间交叉淡化动画

当应用程序在各自驱动不同动画的状态之间迁移时,Animation Player 可以在退出动画和进入动画之间进行交叉淡入淡出。要使用交叉淡入淡出,请向每个状态添加同名的 Animation Player。当 State Manager 在状态之间迁移时,它会按名称匹配 Animation Player 组件,并在迁移持续期间内在退出动画和进入动画之间进行交叉淡入淡出。

请参阅 混合动画。

另请参阅

编辑动画剪辑

混合动画

编辑时间线序列

创建关键帧动画

使用 Kanzi Engine API 创建动画和时间轴。

动画 (Animations)