进阶
物理与特效
介绍 KinoViz 的物理引擎与特效 — 刚体模拟、约束与关节、TextFX 文字动画预设、图层模糊和背景模糊。
概述
KinoViz 内置物理模拟引擎和丰富的视觉特效库。你可以利用物理效果创作真实的运动——重力、碰撞、关节——也可以应用 TextFX 预设、图层模糊和背景模糊来精细打磨动画。
套餐功能详情请参见定价页面。
物理模拟引擎
物理引擎(Rapier 2D,按需加载)可让元素响应真实世界的力:重力、碰撞、摩擦和弹性。为某个图层启用物理后,它将在动画播放时参与模拟运算。
启用物理
- 在画布上选择一个或多个元素。
- 在右侧边栏中打开 物理 面板(或点击工具栏中的 物理 图标)。
- 打开 启用物理 开关。
刚体类型
| 刚体类型 | 行为 |
|---|---|
| 动态 | 完全模拟——受重力、力和碰撞影响 |
| 静态 | 不可移动的地板/墙壁——其他对象与之碰撞,但它自身不移动 |
| 运动学 | 由动画关键帧控制,但仍可推动动态刚体 |
在 物理 → 刚体类型 下拉菜单中设置。
物理属性
| 属性 | 说明 |
|---|---|
| 质量 | 越重的对象需要越大的力才能移动 |
| 重力比例 | 对该对象的全局重力进行缩放(0 = 漂浮,负值 = 上升) |
| 摩擦力 | 滑动接触的阻力(0–1) |
| 弹性系数 | 碰撞时保留的动能比例(0 = 无弹跳,1 = 完全弹跳) |
| 线性阻尼 | 线性运动的空气阻力 |
| 角阻尼 | 旋转运动的空气阻力 |
全局物理设置
在物理面板中点击 全局物理 按钮进行设置:
- 重力(方向与大小——默认:9.8 m/s² 向下)
- 模拟 FPS — 越高越精确(性能开销更大)
- 子步骤 — 每帧额外的求解器迭代次数
运行模拟
- 为元素设置物理属性。
- 在时间轴控件中按 播放。
- 模拟将实时运行。
点击物理面板中的 烘焙物理 可将模拟结果转换为时间轴上的实际关键帧,之后可像编辑普通动画一样对其进行修改。
刚体物理
动态刚体响应重力,并与静态刚体及彼此发生碰撞。常见使用场景:
- 文字字母下落并堆叠在表面上
- 弹跳 Logo 出场
- 产品展示中的球体碰撞
- 多米诺骨牌连锁效果
碰撞形状
| 形状 | 适用情况 |
|---|---|
| 矩形 | 矩形元素、UI 卡片 |
| 圆形 | 圆形元素、球体 |
| 凸包 | 不规则形状(自动拟合元素轮廓) |
| 多边形 | 精确拟合复杂路径 |
在 物理 → 碰撞形状 中进行设置。
约束与关节
关节将两个物理刚体通过运动约束连接在一起。
关节类型
| 关节 | 说明 |
|---|---|
| 距离 | 保持两个刚体之间的固定距离(类似刚杆) |
| 旋转(销钉) | 允许绕共享锚点旋转 |
| 移动 | 仅允许沿单轴滑动 |
| 弹簧 | 带有弹簧阻尼和振荡的距离关节 |
添加关节
- 选择两个均已启用物理的元素。
- 在物理面板中点击 添加关节。
- 选择关节类型,并通过拖拽画布上的控制手柄来配置锚点。
TextFX — 文字动画预设
TextFX 提供 40+ 款内置文字动画,一键即可应用复杂的多关键帧序列。
应用 TextFX 预设
- 选择一个文字元素。
- 在属性面板中打开 TextFX 部分(或点击工具栏中的 TextFX)。
- 浏览预设缩略图,点击即可应用。
预设分类
| 分类 | 可用套餐 | 示例 |
|---|---|---|
| motion_basic | 所有套餐 | fadeIn、fadeOut、scaleUp、scaleDown |
| typewriter | 所有套餐 | 按字符/单词/行逐步显示 |
| motion_advanced | Pro+ | slideUp/Down、bounceIn/Out、elasticIn/Out |
| vector | Pro+ | SVG 描边绘制、drawFade、drawReverse |
| svg_advanced | Pro+ | svgDraw、svgStagger、svgFill、svgWave |
自定义 TextFX
应用预设后,你可以调整:
- 时长 — 动画播放的总时间。
- 延迟 — 动画开始前的等待时间。
- 逐字符 vs 逐单词 vs 逐行 的时序。
- 单个关键帧数值(预设关键帧可在时间轴中编辑)。
图层模糊
图层模糊对元素本身应用高斯模糊。
- 选择任意元素。
- 在属性面板的 特效 部分找到 图层模糊。
- 将滑块从 0(无模糊)拖到所需数值。
图层模糊可添加关键帧——非常适合景深揭示效果,例如元素从模糊状态逐渐变清晰。
背景模糊
背景模糊会模糊元素后方的所有内容。只有当元素具有一定透明度(不透明度 < 100% 或部分透明填充)时才可见——效果与 CSS backdrop-filter 相同。
使用场景:
- 磨砂玻璃 UI 卡片
- 半透明 HUD 叠加层
- 柔和晕影效果
在同一 特效 部分进行配置。同时调整 模糊量 和 不透明度 可获得最佳磨砂玻璃效果。
背景模糊是 GPU 密集型效果。建议同时使用的背景模糊元素不超过 2–3 个,以保证流畅的预览性能。