动画系统 (Animation System)

使用动画系统,您可以根据时间动画化属性、控制回放以及将属性值更改映射到动画。

../_images/animation-system-banner.png

Kanzi 动画系统包括:

  • 动画定义了如何为属性设置动画。例如,动画定义了如何将颜色从红色变为绿色,或将浮点值从 7 变为 11。在 Kanzi 中,您可以创建这些类型的动画:

    From-to 动画定义了属性值从哪个值更改到哪个值。您可以省略这些值中的任意一个,以便从当前值或到属性的当前值进行动画。From-to 动画使用一个缓动曲线来定义动画的变化速率。您可以使用 Kanzi 提供的缓动曲线之一,或定义您自己的缓动曲线。

    ../_images/from-to-animation.png

    关键帧动画使用的关键帧定义了属性值以及动画要在何时达到值。在 Kanzi 中,您可以创建线性、阶梯和贝塞尔样条关键帧。

    ../_images/keyframe-animation.png
  • 时间线将动画映射到时间和您想要动画化的对象。动画本身并不对对象进行动画处理,而是时间线负责。在 Kanzi 中,您可以创建这些类型的时间线:

    属性时间线将动画应用于对象的属性。例如,要更改 Image 节点的布局大小,使用属性时间线来为该节点的 Layout Width 和 Layout Height 属性设置动画。

    ../_images/property-timeline.png

    属性字段时间轴将动画应用于对象的一个或多个属性字段。例如,您可以为每个颜色通道使用单独的动画来更改 Text Block 节点中文本的颜色。

    ../_images/property-field-timeline.png

    并行时间轴允许您将 Kanzi 同时播放的时间轴分组。并行时间轴在最后一个子时间轴中的动画结束时结束。使用此时间轴来组织时间轴集合并创建时间轴的组合。

    ../_images/parallel-timeline.png
  • 动画播放器接收您可以通过动作发送的消息,并生成您可以通过触发器拦截的消息。例如,您可以发送消息来开始、停止和暂停播放,并可以接收消息以了解动画播放何时开始、停止或完成。

    在 Kanzi 中,这些动画播放器可用:

    ../_images/animation-player.png

    Animation Player。

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

    请参阅 使用关键帧动画。

    ../_images/float-value-accumulator.png

    Float Value Accumulator。

    使用 Float Value Accumulator 随时间或按帧递增 float 属性类型或属性字段的值。

    请参阅 增加属性类型的值。。

    ../_images/int-value-accumulator.png

    Int Value Accumulator。

    使用 Int Value Accumulator 随时间或按帧递增整数属性类型的值。

    请参阅 增加属性类型的值。。

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

    Property Driven Animation Player。

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

    请参阅 创建属性驱动的动画。

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

    Property Target Interpolator。

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

    请参阅 插值属性值。

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

    Property Target Easing Interpolator。

    当您想要动态设置属性的目标值,并希望使用缓动函数将当前值随时间插值到目标值时,使用 Property Target Easing Interpolator。缓动函数使您能够创建逼真的动画,从而提供更愉悦的用户体验。

    请参阅 使用缓动函数插值属性值。

属性时间线动画化的工作原理

属性时间轴使用 Kanzi 属性管理器修改器堆栈。Kanzi 将动画应用于属性的基本值,或堆栈中的前一个修改器(可以是另一个动画)。这样,您可以堆叠影响同一属性的动画。

当动画结束时,它仍然保持活动状态。描述动画的对象仍然存在,以便在请求时修饰符可以提供属性值。使用 Kanzi Engine API 将多个动画应用于对象时,您必须将其移除,否则它们会持续消耗资源。其他系统,如状态管理器和 Animation Player,会自行跟踪动画,因此您不需要这样做。

小技巧

在 Kanzi Studio 的 Node Tree 窗口中,当状态机、绑定、数据源绑定或动画覆盖了某个节点中部分属性的值时,该节点旁边会显示一个指示灯。

../_images/node-override-notice.png

要在 Kanzi Studio 工程中导航至覆盖的源,请右键点击覆盖指示灯,然后在上下文菜单中选择要导航至的源。

动画化对象的工作流程

要动画化对象:

  1. 创建一个动画:

    • 对于从-至动画,设置要从哪个值到哪个值对属性进行动画化,并设置动画的持续时间和缓动曲线。

    • 对于关键帧动画,为动画填充关键帧,以设置动画必须达到的属性值,并使用线性关键帧、步进关键帧或贝塞尔样条关键帧。

  2. 创建一个时间线。

  3. 将动画分配给时间线。

  4. 回放动画。

另请参阅

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

动画 (Animations)

动画最佳实践

Kanzi 基础知识

使用关键帧动画

创建属性驱动的动画

插值属性值

使用缓动函数插值属性值