这是一个为 AI 代理提供的 Remotion 最佳实践技能库,包含了使用 Remotion 进行视频创作的详细指南和代码示例。
Remotion 是一个使用 React 创建视频的强大框架。通过编程方式创建视频,您可以实现精确的控制、动态内容生成和可重复的视频制作流程。
本仓库包含了 Remotion 开发的核心技能和最佳实践,涵盖以下主题:
- 动画 - Remotion 的基础动画技巧
- 组合 - 定义组合、静态图像、文件夹、默认属性和动态元数据
- 时序控制 - Remotion 中的插值曲线 - 线性、缓动、弹簧动画
- 序列编排 - Remotion 的序列模式 - 延迟、修剪、限制项目持续时间
- 图像 - 使用 Img 组件在 Remotion 中嵌入图像
- 视频 - 在 Remotion 中嵌入视频 - 修剪、音量、速度、循环、音调
- 音频 - 在 Remotion 中使用音频和声音 - 导入、修剪、音量、速度、音调
- GIF 动画 - 显示与 Remotion 时间轴同步的 GIF
- 资源管理 - 将图像、视频、音频和字体导入 Remotion
- 3D 内容 - 使用 Three.js 和 React Three Fiber 在 Remotion 中创建 3D 内容
- 字幕显示 - 在 Remotion 中显示字幕,支持 TikTok 风格的分页和单词高亮
- 字幕导入 - 使用 @remotion/captions 将 .srt 字幕文件导入 Remotion
- 字幕转录 - 转录音频以在 Remotion 中生成字幕
- Lottie 动画 - 在 Remotion 中嵌入 Lottie 动画
- 图表可视化 - Remotion 的图表和数据可视化模式
- 地图动画 - 使用 Mapbox 添加地图并进行动画处理
- 字体加载 - 在 Remotion 中加载 Google 字体和本地字体
- 文本动画 - Remotion 的排版和文本动画模式
- 文本测量 - 测量文本尺寸、使文本适应容器以及检查溢出
- DOM 节点测量 - 在 Remotion 中测量 DOM 元素尺寸
- 提取帧 - 使用 Mediabunny 在特定时间戳从视频中提取帧
- 获取视频时长 - 使用 Mediabunny 获取视频文件的时长(秒)
- 获取视频尺寸 - 使用 Mediabunny 获取视频文件的宽度和高度
- 获取音频时长 - 使用 Mediabunny 获取音频文件的时长(秒)
- 视频解码检查 - 使用 Mediabunny 检查浏览器是否可以解码视频
- 参数化 - 通过添加 Zod 模式使视频可参数化
- 计算元数据 - 动态设置组合持续时间、尺寸和属性
- TailwindCSS - 在 Remotion 中使用 TailwindCSS
- 透明视频 - 渲染带有透明度的视频
- 修剪 - Remotion 的修剪模式 - 剪切动画的开头或结尾
- 场景转场 - Remotion 的场景转场模式
这个技能库是为 AI 代理设计的,但也可以作为开发者的参考资料。每个规则文件都包含:
- 概念说明 - 清晰的功能描述
- 代码示例 - 可直接使用的代码片段
- 最佳实践 - 推荐的使用方法和注意事项
remotion-skills/
├── README.md # 本文件
└── skills/
└── remotion/
├── SKILL.md # 技能元数据和索引
└── rules/ # 具体规则文件
├── 3d.md
├── animations.md
├── assets.md
└── ...
欢迎提交 Issue 和 Pull Request 来改进这个技能库!
本项目基于原始 remotion-dev/skills 仓库创建,遵循相同的开源许可证。