介绍
快速入门账号与注册项目面板团队协作
编辑器基础设计模式动画与时间轴视频元素音乐与音频
如何在浏览器里给 SVG 做动画(无需写代码)如何制作 Logo 揭示动画如何把产品截图做成演示动画如何导出透明 PNG(以及需要透明视频时怎么办)如何制作视频用的动态渐变背景如何导入并动画化 3D 模型(GLB/GLTF)本地免费小工具:Clean Up 水印移除、背景移除与胶片模拟
KinoViz AI 助手3D 系统材质与视觉特效物理与特效组件
KinoVizKinoViz
进阶

物理与特效

介绍 KinoViz 的物理引擎与特效 — 刚体模拟、约束与关节、TextFX 文字动画预设、图层模糊和背景模糊。

概述

KinoViz 内置物理模拟引擎和丰富的视觉特效库。你可以利用物理效果创作真实的运动——重力、碰撞、关节——也可以应用 TextFX 预设、图层模糊和背景模糊来精细打磨动画。

套餐功能详情请参见定价页面。

物理模拟引擎

物理引擎(Rapier 2D,按需加载)可让元素响应真实世界的力:重力、碰撞、摩擦和弹性。为某个图层启用物理后,它将在动画播放时参与模拟运算。

启用物理

  1. 在画布上选择一个或多个元素。
  2. 在右侧边栏中打开 物理 面板(或点击工具栏中的 物理 图标)。
  3. 打开 启用物理 开关。

刚体类型

刚体类型行为
动态完全模拟——受重力、力和碰撞影响
静态不可移动的地板/墙壁——其他对象与之碰撞,但它自身不移动
运动学由动画关键帧控制,但仍可推动动态刚体

在 物理 → 刚体类型 下拉菜单中设置。

物理属性

属性说明
质量越重的对象需要越大的力才能移动
重力比例对该对象的全局重力进行缩放(0 = 漂浮,负值 = 上升)
摩擦力滑动接触的阻力(0–1)
弹性系数碰撞时保留的动能比例(0 = 无弹跳,1 = 完全弹跳)
线性阻尼线性运动的空气阻力
角阻尼旋转运动的空气阻力

全局物理设置

在物理面板中点击 全局物理 按钮进行设置:

  • 重力(方向与大小——默认:9.8 m/s² 向下)
  • 模拟 FPS — 越高越精确(性能开销更大)
  • 子步骤 — 每帧额外的求解器迭代次数

运行模拟

  1. 为元素设置物理属性。
  2. 在时间轴控件中按 播放。
  3. 模拟将实时运行。

点击物理面板中的 烘焙物理 可将模拟结果转换为时间轴上的实际关键帧,之后可像编辑普通动画一样对其进行修改。

刚体物理

动态刚体响应重力,并与静态刚体及彼此发生碰撞。常见使用场景:

  • 文字字母下落并堆叠在表面上
  • 弹跳 Logo 出场
  • 产品展示中的球体碰撞
  • 多米诺骨牌连锁效果

碰撞形状

形状适用情况
矩形矩形元素、UI 卡片
圆形圆形元素、球体
凸包不规则形状(自动拟合元素轮廓)
多边形精确拟合复杂路径

在 物理 → 碰撞形状 中进行设置。

约束与关节

关节将两个物理刚体通过运动约束连接在一起。

关节类型

关节说明
距离保持两个刚体之间的固定距离(类似刚杆)
旋转(销钉)允许绕共享锚点旋转
移动仅允许沿单轴滑动
弹簧带有弹簧阻尼和振荡的距离关节

添加关节

  1. 选择两个均已启用物理的元素。
  2. 在物理面板中点击 添加关节。
  3. 选择关节类型,并通过拖拽画布上的控制手柄来配置锚点。

TextFX — 文字动画预设

TextFX 提供 40+ 款内置文字动画,一键即可应用复杂的多关键帧序列。

应用 TextFX 预设

  1. 选择一个文字元素。
  2. 在属性面板中打开 TextFX 部分(或点击工具栏中的 TextFX)。
  3. 浏览预设缩略图,点击即可应用。

预设分类

分类可用套餐示例
motion_basic所有套餐fadeIn、fadeOut、scaleUp、scaleDown
typewriter所有套餐按字符/单词/行逐步显示
motion_advancedPro+slideUp/Down、bounceIn/Out、elasticIn/Out
vectorPro+SVG 描边绘制、drawFade、drawReverse
svg_advancedPro+svgDraw、svgStagger、svgFill、svgWave

自定义 TextFX

应用预设后,你可以调整:

  • 时长 — 动画播放的总时间。
  • 延迟 — 动画开始前的等待时间。
  • 逐字符 vs 逐单词 vs 逐行 的时序。
  • 单个关键帧数值(预设关键帧可在时间轴中编辑)。

图层模糊

图层模糊对元素本身应用高斯模糊。

  1. 选择任意元素。
  2. 在属性面板的 特效 部分找到 图层模糊。
  3. 将滑块从 0(无模糊)拖到所需数值。

图层模糊可添加关键帧——非常适合景深揭示效果,例如元素从模糊状态逐渐变清晰。

背景模糊

背景模糊会模糊元素后方的所有内容。只有当元素具有一定透明度(不透明度 < 100% 或部分透明填充)时才可见——效果与 CSS backdrop-filter 相同。

使用场景:

  • 磨砂玻璃 UI 卡片
  • 半透明 HUD 叠加层
  • 柔和晕影效果

在同一 特效 部分进行配置。同时调整 模糊量 和 不透明度 可获得最佳磨砂玻璃效果。

背景模糊是 GPU 密集型效果。建议同时使用的背景模糊元素不超过 2–3 个,以保证流畅的预览性能。

下一步

  • 动画与时间轴 — 为物理和特效添加关键帧
  • 设计模式 — 在添加物理前设置元素布局
  • 3D 系统 — 将物理效果与 3D 场景结合
  • 导出与发布 — 渲染物理驱动的动画

材质与视觉特效

KinoViz 材质与视觉特效指南 — 液态玻璃、长虹玻璃与磨砂玻璃、3D 专属液态金属、辉光与泛光、图片视频滤镜与色调预设、ASCII 艺术、融球与细胞群组,以及混合模式。

组件

把选中内容变成带主控与关联实例的可复用组件——编辑一次主控,所有副本同步更新;也可单独覆写某个实例而不影响其余。

On this page

概述
物理模拟引擎
启用物理
刚体类型
物理属性
全局物理设置
运行模拟
刚体物理
碰撞形状
约束与关节
关节类型
添加关节
TextFX — 文字动画预设
应用 TextFX 预设
预设分类
自定义 TextFX
图层模糊
背景模糊
下一步