Remotion 入门 - 使用 React.js 创建动画和视频

---

很多人利用视频来增强他们的数字体验，但是如果有人告诉你，你现在可以在网上制作视频呢？

本文介绍了 Remotion，这是一个库集合，它为使用 React 制作自动程序生成的电影奠定了基础。

Remotion 是一个新发布的软件包，允许使用 React 制作电影和视觉效果。许多 Web 开发人员发现它很有趣，因为它赋予他们更多制作自己的电影和动画的自由。

关于 Remotion 的概述

您可以使用您最喜欢的 Web 技术（包括 JavaScript、HTML、TypeScript、CSS 等）来使用 Remotion 制作动画和电影。这个令人兴奋的库是最近才发布的。

它允许您使用 WebGL、SVG、CSS 和 canvas 将视觉元素组合成视频。更好的是，您可以使用众所周知的编程结构（如数学、函数、变量等）来实现这些。

使用 Remotion，用户可以轻松创建视频并使用 JavaScript 编程将其转换为 MP4 格式。因为它是一个基于 React 的框架，所以它能够充分利用 React 的优势，包括快速重载、可重用元素和强大的组合。

此外，Remotion 还带有一个名为 Remotion Player 的播放器，允许您在浏览器中观看和评估您的视频，同时让您感觉像是在使用真正的视频编辑器。

开始使用 Remotion

启动一个新的 Remotion 项目的过程相当简单。在开始使用 Remotion 之前，您必须安装两个先决条件：Node.js 和 FFmpeg。

请参阅此处的步骤以配置 Remotion：

步骤 1：安装 FFMPEG 和 Node.js

您将专注于安装 FFMPEG，因为 Node.js 的部署非常常见。您必须首先通过下载部分安装合适的 FFMPEG 版本。

将其解压缩到您选择的目录后，以管理员身份运行以下命令在 CMD（Windows）中修改您的路径变量。

setx /M PATH "path\to\ffmpeg\bin;%PATH%"

步骤 2：启动新项目

下载必要的条件后，初始化一个新的 Remotion 视频只需要一个提示；您可以使用 yarn 或 npm。

npm init video

或者

yarn create video

您现在完成了。新的 Remotion 项目已成功初始化，您现在可以使用以下命令启动它：

npm run start

启动 Remotion

获得 FFmpeg 和 Node 后，您就可以开始使用 Remotion 了。运行以下样板代码以启动演示视频和 React 应用程序：

yarn create video

或者

npm init video

借助这些提示，将创建一个在显式服务器上运行的 JavaScript 应用程序，其中包括：

• 一个名为“`remotion.config.ts`”的文件，允许您自定义不同的 Remotion 设置。

• 一个“`server.tsx`”文件，其中包含您渲染视频背后的原因。

• 如果您希望将您的站点容器化以进行服务器端渲染 (SSR)，您可以提供额外的 Dockerfile。

• GitHub 流程、ESlint、Prettier 和您的代码编辑配置数据（当您使用 VSCode 时）。

• 一个名为“`src`”的目录，其中包含用于制作电影的 React 元素。

此外，该脚本还安装了您入门所需的任何 npm 依赖项。完成后，您可以使用 `npm run start` 或 `yarn start` 启动视频。与 Adobe Premiere Pro 等视频制作工具类似，Remotion 的媒体播放器可以在 localhost:3000 上运行，其组件排列在网格上。

Remotion 原理

启动 Remotion 项目后，您可以开始制作视频。但是，如果您事先了解 Remotion 的基础知识，那就更好了。

视频属性

Remotion 提供了视频属性，例如高度、durationInFrames、尺寸和每秒帧数 (fps)。

这些属性允许您指定每秒帧数、它必须广播的帧数以及元素的尺寸（以像素为单位）。还建议使用 `useVideoConfig` 推断这些属性以保持组件的可重用性。

组合

在 Remotion 中，用户还可以将组合用作组件并使用上述属性（如元数据）。您可以在项目的 `video.tsx` 文件中看到三个组合组件，所有这些组件都具有视频属性和其他输入的元数据。此外，这些组合显示在这个 Remotion Player 的左上角。

序列组件

Remotion 中的序列组件提供两个主要功能。它主要用于将不同的时间帧分配给视频组件，并且您可以在保持组件之间关系的同时重复相同的组件。

序列组件是一个高阶组件，能够保留子组件。

它还接受三个 props，其中一个为可选，两个为必需。

• durationInFrames - 基于帧的序列组件的长度

• from - 指定帧，指定应显示剪辑的哪个部分。

• name - 您为此可选 prop 输入的名称将显示在任何 Remotion 播放器时间轴中。如果您遵循正确的命名约定，您将能够理解每个组件是如何连接的。

动画特性

动画对于视频至关重要，Remotion 使您可以灵活地配置一些令人惊叹的动画。

例如，当您需要简单的外观变化时，您可以逐帧更改不透明度。此外，Remotion 具有两个内置函数 spring 和 interpolate，您可以使用它们来创建更复杂的动画。

• Spring - 通过增强动画的自然度，spring 动画让您可以更具创意地进行演示。

• Interpolate - 插值算法采用四个输入参数：您希望将其输入转换到的各种值、输入的可能值的范围、输入量（通常是帧）以及其他参数。

结论

Remotion 仍然非常新，但它确实拥有许多令人惊叹的功能。

Remotion 包含开发人员熟悉的特性，例如数据获取、参数化渲染和服务器端渲染，这对于吸引开发人员社区来说是一个绝佳的开端。

特别是对于那些希望找到一种方法来制作动画或短视频以供个人使用的人来说，这是一个绝佳的选择。