Remotion

今天分享一下 remotion 面板功能，以及如何通过代码微调视频元素。 建议先看之前的视频，视频介绍了 remotion 初级使用方法。 以下为文档内容，也可以点击视频观看讲解。 1、面板介绍和关键帧。 “- +” - 调整轨道的大小。 “fit” - 放大、缩小画布。 “1x” - 调整播放速度。 “[ ]” - 隐藏当前位置的左、右区域，会影响导出视频。 “棋盘格” - 显示透明区域。 “方块” - 选中画布中的元素。 当我们选中画布中的元素之后，可以对其进行调整。 右侧是调整面板。 layout - 自动填充、自定义调整。 transform origin - 圆心位置调整位移。 offset - 移动。 scale - 放大缩小、是否按照比例。 rotation - 旋转。 Opacity - 透明度。 Premount For - 预加载。 预加载的意思是，提前挂起这个组件。瑜伽在功能，可避免： 开头几帧黑屏 图片闪烁一下才出现 字体跳变 effects - 添加特效。例如，uvTranslate() 移动特效。通过关键帧，看到实际效果。 点击菱形，可以添加关键帧和取消关键帧。 下半部可以选择视频轨道和视频片段。 小眼睛 - 隐藏/显示视频。 ...

今天的文章，分享一下remotion工具。 以下是文字内容，也请参考视频演示。 1、remotion 是什么 remotion 不是 ai 工具，不是 ai 大模型。 它是一个代码开发的框架，借助H5、 CSS、Canvas、SVG、WebGL 等前端技术，将图形、文字、图片等元素，通过浏览器渲染出来，让用户看到动态效果，最后，再把这些动态效果，转化为视频。 即便 ai 技术消失了，remotion 仍然可以做出视频。 2、remotion 项目介绍 保证系统安装的 node 版本 >= 20。 找到一个空文件夹，用命令行终端打开。 在命令行终端执行，如下指令： npx create-video@latest 如果出现报错，请在命令行输入以下指令，配置代理 $env:HTTP_PROXY="http://127.0.0.1:代理端口" $env:HTTPS_PROXY="http://127.0.0.1:代理段口" 所有选项选择默认即可。 使用 vscode 打开项目。 输入： npm i 下载三方库。 npm run dev 打开 remotion studio 工作站。 remotion项目中的文件夹对应关系如下： 文件夹 对应工具 .agent / .agents VS Code Copilot Agent / 通用 agent 配置 .claude Claude Code（Anthropic） .cline Cline（VS Code 插件） .codex OpenAI Codex CLI .cursor Cursor（AI IDE） .windsurf Windsurf（Codeium 的 AI IDE） .continue Continue（VS Code 插件） .gemini Gemini CLI（Google） .roo Roo Code（VS Code 插件） .trae Trae（字节跳动 AI IDE） .goose Goose（Block/Square） .openhands OpenHands（原 OpenDevin） .kiro Kiro（AWS） .qwen 通义千问相关工具 .mcpjam MCP（Model Context Protocol）相关工具 .factory Factory .crush / .pi / .pochi 等 其他 AI 编程工具 其它目录： ...