SuperAPI AI 工具集

theatre-js

设计与创作

查看项目

更新于 10-16 07:23

技能介绍

用途:Theatre.js 是面向 Web 的动效设计编辑器与动画库,提供可视化时间轴编辑器 Studio,并可通过代码控制动画,适用于关键帧动画、Three.js/R3F 场景动画以及可视化动画编辑器等场景。

主要能力:核心概念包括 Project(动画数据容器,对应导出的 JSON 状态)、Sheet(场景或组件,含对象与一个 sequence)、Object(带类型属性的可动画实体)、Sequence(含关键帧的时间轴,控制播放)、Props(number、compound、rgba 等类型值)。支持读取属性值、监听值变化、播放/暂停/跳转动画,以及 React 与 React Three Fiber 集成。

安装:npm install @theatre/core@0.7 @theatre/studio@0.7;R3F 集成 npm install @theatre/r3f@0.7;React 工具 npm install @theatre/react;简化控制 npm install theatric。

使用方式:通过 getProject 创建项目、project.sheet 创建 sheet、sheet.object 创建对象并定义属性;用 obj.onValuesChange 监听变化,obj.value 读取值;用 sheet.sequence.play/pause 及 position 控制播放。R3F 中使用 SheetProvider 与 editable 组件(如 e.mesh),并需设置 theatreKey。

限制与注意事项:Studio 仅应在开发环境初始化,避免打包进生产环境;生产环境需加载导出的 state.json,否则无动画;对象 key 必须唯一,重复会覆盖;R3F 需引入并 extend 对应扩展;可编辑组件必须提供 theatreKey。

资料未提供收费、价格、平台支持范围及具体效果等信息。