点击上方蓝字关注我们
IT 咖啡馆，探索无限可能！
恭喜你发现了这个宝藏，这里你会发现优质的开源项目、IT知识和有趣的内容。
你是不是也很喜欢各种或酷炫或可爱的动画视频，想自己也做个但是又不会AE之类的软件，现在如果你会用react也可以了。
今天我们分享的开源项目，它是一个使用 React 以编程方式创建视频的框架，你不必再纠结那些动画软件了，用编程就可以搞定视频，它就是：Remotion
Remotion 是什么
Remotion允许你使用熟悉的工具和语言（如HTML，CSS，JavaScript和TypeScript）创建视频和动画。你可以利用自己在编程方面的专业知识，使用Remotion创建动画和视频。
我们先看几个效果，来直观的感受一下Remotion可以试下的效果。
下是一个小游戏的效果
再来看一个更细节的动画和使用效果：
Remotion 允许开发者利用现有的 Web 技术进行视频创作，这包括使用 React 组件、CSS 样式以及 JavaScript 逻辑。以下是 Remotion 制作视频的一些特点：
使用React组件创建基于浏览器的视频
强大的时间轴编辑器，用于对组件进行排序和动画处理
动态内容生成，内容可设置为具有个性化和数据驱动视频的prop
使用JavaScript进行代码驱动自定义和操作
各种格式和分辨率的高质量输出
通过Git集成提供协作和版本控制支持
与现有的React工作流程和工具无缝集成
安装和使用
安装
安装
想要使用Remotion你需要先安装好nodejs，之后你可以通过NPM，bun，yarn等来进行安装。以NPM为例：
npx create-video@latest
安装过程会自动帮你创建新项目，并给出基础的模版列表供选择，一路确认下来完成安装，就可以开始自己的创作了。
模版
模版
开始使用时可以基于项目提供一些模版，这样可以简化开始的工作，在文档中可以查到目前提供的各种模版。
如果没有特殊的要求，可以使用系统的hello world模版开始。
启动项目
完成安装后，可以进入到自己刚刚新建的项目里，执行命令来启动remotion studio。
npm start
服务器将在端口上启动3000（如果不可用，则在更高的端口上启动），并且 Remotion Studio 应在浏览器中打开。使用 Remotion Studio，您可以预览视频，如果连接了服务器，甚至可以渲染视频。
基础元素
Remotion 的理念是给你一个帧编号和一个空白画布，你可以使用React在其上渲染任何你想要的东西。这是一个将当前帧渲染为文本的示例 React 组件：
import { AbsoluteFill, useCurrentFrame } from "remotion";export const MyComposition = () => {const frame = useCurrentFrame();return (<AbsoluteFillstyle={{justifyContent: "center",alignItems: "center",fontSize: 100,backgroundColor: "white",}}>The current frame is {frame}.</AbsoluteFill>);};
视频是图像随时间变化的结果。如果你每帧都改变内容，你最终会得到一个动画。
视频有4个属性：
width以像素为单位。height以像素为单位。durationInFrames：视频的帧长。fps：视频的帧速率。
Compositions是 React 组件和视频元数据的组合，通过在 中渲染组件src/Root.tsx，您可以注册可渲染的视频并使其在 Remotion 侧栏中可见。例如以下：
export const RemotionRoot: React.FC = () => {return (<Compositionid="MyComposition"durationInFrames={150}fps={30}width={1920}height={1080}component={MyComposition}/>);};
动画
动画通过随时间改变属性来实现。
例如我们想要在 60 帧内淡化文本，我们需要逐渐改变时间opacity，使其从 0 变为 1。
更多使用还是需要自己跟着文档来学习了。
总结
作为一款开源项目，Remotion 的开发者社区非常活跃，功能也在不断更新和扩展。也要注意一下它的一些功能是要收费的，并且限制传播，在使用时要符合开源协议的要求。单纯的从能力上来说是非常不错的，有兴趣的朋友非常值得去研究研究。
项目信息
项目名称：remotion
GitHub 链接：https://github.com/remotion-dev/remotion
Star 数：20K
