kanzi中动画的使用--让属性动起来

📅 2026/8/4 14:47:35 👁️ 阅读次数 📝 编程学习
kanzi中动画的使用--让属性动起来

一、动画的核心概念

  • 动画 = 随时间改变属性值
    在 Kanzi 中,任何可动画的属性(数值、颜色、位置、纹理路径等)都可以通过动画来驱动变化。

  • 动画组件

    • 动画数据(Animation Data):定义单个属性如何随时间变化(关键帧、累加规则等)。

    • 动画剪辑(Animation Clip):容器,可包含多个动画数据轨道。

    • 动画播放器(Animation Player):节点组件,用于控制动画剪辑的播放(开始、停止、循环、速度等)。


二、创建动画的两种常用方法

1. 关键帧动画(Keyframe Animation)—— 最直观

适用场景:需要精确控制不同时间点的属性值(例如 0→10 线性变化、颜色渐变、分段跳变)。

步骤

  1. Library>Animations>Animation Clips中创建或打开一个动画剪辑。

  2. Node Tree中找到目标属性(例如Common.PFloat1),拖拽到动画剪辑编辑器中,自动生成轨道。

  3. 在轨道上添加关键帧:

    • 时间 0.0 秒 → 值0.0

    • 时间 1.0 秒 → 值10.0

  4. 设置插值模式:

    • 线性(Linear):数值均匀变化,适合平滑过渡。

    • 步进(Step):数值跳跃变化,适合切换纹理/状态。

示例:PFloat1 从 0.0 到 10.0 线性增加,配合绑定中的INT()取整,可实现“每增加 1 切换一张图片”。

2. 数值累加器(Float Value Accumulator)—— 更高效

适用场景:需要属性值周期性或持续递增,无需手动设置多个关键帧。

步骤

  1. 选中目标节点(如Common),在Node Components中添加Float Value Accumulator

  2. 设置参数:

    • Target Property Type:选择要控制的属性(如PFloat1)。

    • Increment Size:每次增加的值(例如 1.0)。

    • Increment Time Interval (s):增加间隔(例如 0.1 秒)。

    • Maximum Value:上限(例如 10.0)。

    • Minimum Value:下限(可选)。

优点:配置简单,适合循环计数器、进度条等规律变化。


三、动画播放器(Animation Player)配置要点

动画剪辑需要由Animation Player节点组件来播放。

常见属性含义

属性作用
Target Animation Timeline指定要播放的动画剪辑
Autoplay Enabled页面加载时是否自动播放
Playback ModeNormal(正向)、Reverse(反向)、Ping Pong(来回)
Duration Scale播放速度倍率,1 为原速,2 为两倍快
Repeat Count播放次数(与Infinite配合)
Infinite无限循环(优先级高于Repeat Count
Restore Original Values After Playback播放结束后是否恢复动画开始前的值

如何触发播放?

  • 通过按钮Click触发器 →Play Animation动作,选择目标 Animation Player。

  • 通过状态机进入某个状态时自动播放。

  • 通过代码调用play()方法。


四、动画 + 绑定 = 动态纹理切换(充电线案例)

这是 Kanzi 中非常经典的组合技法:

目标效果

充电线图片随电量或状态变化而“流动”或“分段点亮”,看起来像动态效果。

实现原理

  1. 动画驱动数据
    动画让Common.PFloat1从 0.0 线性变化到 10.0(每 0.1 秒增加 0.1,最终到达 10.0)。
    (可选同时改变Common.PInt2作为分段状态)

  2. 绑定将数据映射为纹理路径
    在 Image 节点的Texture属性上使用绑定:

    "kzb://cluster_sub/Textures/charge/charge_line/charge_line_" + STRING(INT({@./Common.PFloat1})) + "_" + STRING({@../../Common.PInt2})
    • INT(PFloat1)将浮点数取整(0→0, 0.9→0, 1.0→1),得到整数索引。

    • 每次PFloat1PInt2变化,绑定重新计算路径。

    • Kanzi 自动加载新纹理并显示。

  3. 用户看到的效果
    随着动画播放,路径从charge_line_0_0charge_line_1_0→ … →charge_line_10_0依次切换,产生“流动”视觉。

核心思想:动画只负责改数字,绑定负责把数字翻译成资源地址。

五、状态机和动画的区别

维度状态机状态切换属性动画(如关键帧动画)
本质逻辑状态的变化属性值的连续变化
变化方式离散的、瞬间的(除非加了过渡动画)连续的、平滑的(随时间插值)
关注点“现在处于什么模式?”(白天/黑夜、展开/收起)“数值从多少变到多少?”(位置、颜色、透明度)
触发方式用户交互、数据绑定、代码调用时间轴播放、状态机过渡、代码调用
是否必须连续不必须,可以瞬间切换是,本质就是连续变化

六、常见问题与检查清单

问题可能原因解决方法
动画不播放未勾选Autoplay且没有触发播放添加触发器或代码调用Play
属性没有变化动画轨道未正确连接属性检查Target Property是否指向正确的节点和属性
绑定不更新绑定模式为OneTime改为OneWay
纹理切换跳变不平滑使用了线性插值但期望步进将关键帧插值改为Step
数值累加器不工作未设置Increment SizeTime Interval正确配置参数,并确保节点组件已添加到节点上

七、总结口诀(帮助记忆)

动画改数字,绑定换图片。
关键帧放精准,累加器省功夫。
播放器做开关,模式循环看需求。
纹理路径拼出来,动态效果自然有。