motion-canvas

# Motion Canvas - 使用 TypeScript 进行生产级视频创作 使用 Motion Canvas 进行程序化视频创作的完整生产级技能，包括关键的 ESM/CommonJS 兼容性解决方案、完整配置模板以及综合故障排除指南。 ## ⚠️ 关键：ESM/CommonJS 互操作性问题 **重要**：`@motion-canvas/vite-plugin` 包是以 CommonJS 格式发布的，这会导致在现代 ESM 项目中出现导入错误。标准的 `import motionCanvas from '@motion-canvas/vite-plugin'` **将无法工作**。 你必须使用下文“设置”部分中记录的 `createRequire` 解决方案。 ## 何时使用 当你处理 Motion Canvas 代码时，请使用此技能获取以下领域的专业知识： - 使用 TypeScript 和生成器函数创建动画视频 - 使用信号（Signals）和响应式值构建动画 - 使用矢量图形和 Canvas API - 将动画与配音和音频同步 - 使用实时预览编辑器获取即时反馈 - 使用流控制实现程序化动画 - 创建信息可视化和图表 - 动画化文本、形状和自定义组件 - **从零开始设置 Motion Canvas 项目并进行正确配置** - **排查常见的设置和构建错误** ## 核心概念 Motion Canvas 允许你使用以下方式创建视频： - **生成器函数 (Generator Functions)**：使用带有 `yield*` 语法的 JavaScript 生成器描述动画 - **信号 (Signals)**：自动更新依赖属性的响应式值 - **实时预览 (Real-time Preview)**：由 Vite 驱动的带有即时预览功能的实时编辑器 - **TypeScript 优先**：在 TypeScript 中编写动画，并获得完整的 IDE 支持 - **Canvas API**：利用 2D Canvas 进行高性能矢量渲染 - **音频同步**：将动画与配音精确同步 ## 完整设置指南 ### 第 1 步：初始化项目 bash # 创建项目目录 mkdir my-motion-canvas-project cd my-motion-canvas-project # 初始化 package.json npm init -y ### 第 2 步：为 ESM 配置 package.json **关键**：添加 `"type": "module"` 以启用 ESM 导入。 { "name": "my-motion-canvas-project", "version": "1.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" } } ### 第 3 步：安装所有必需的依赖项 **关键**：必须包含 `@motion-canvas/ui` - 否则插件将无法运行。 bash npm install -