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 包含開發人員熟悉的特性，例如資料獲取、引數化渲染和伺服器端渲染，這對於吸引開發人員社群來說是一個絕佳的開端。

特別是對於那些希望找到一種方法來製作動畫或短影片以供個人使用的人來說，這是一個絕佳的選擇。