如何使用React创建视频和动画

点击上方关注 TianTianUp，一起学习，天天进步

大家好，我是小弋。

分享的内容是:

如何使用 React Remotion 来创建视频的，如果你之前对视频很感兴趣的话，这篇文章可以参考。

正文

Remotion是一个最近推出的库，它允许您使用 React 创建视频和动态图形。作为一名 Web 开发人员，我发现它非常有趣，因为它为我们自己创建视频和动画打开了一扇新的大门。

它的官网：

https://www.remotion.dev/

简介

Source: https://www.remotion.dev/

正如我提到的，Remotion是最近推出的一个令人兴奋的库，它允许你使用你最喜欢的网络技术，如HTML、CSS、JavaScript、TypeScript等来创建视频和动画。

除此之外，你还可以使用你所有关于编程、函数、算法、API的知识来为视频添加各种效果。作为一个基于React的库，Remotion能够最大限度地利用Reacts的特性，如可重用的组件、强大的组合和快速重载。

Remotion还配备了一个被称为Remotion Player的播放器，它给你带来了真正的视频编辑器的感觉，它可以用浏览器来播放和审查你的视频。

如何设置Remotion？

创建一个新的Remotion项目是非常简单的。但有两个依赖项你应该先安装。

步骤1：安装NodeJS和FFMPEG

由于安装NodeJS是非常常见的，我将重点介绍安装FFMPEG。首先，你需要从他们的下载页面下载合适版本的FFMPEG。

FFMPEG Downloads page.

然后将其解压到你选择的文件夹中，并在CMD中以管理员权限运行以下命令（在windows中）来更新你的路径变量。

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

第2步：启动新项目

安装完上述依赖后，初始化一个新的Remotion视频只需要一个命令，你可以使用yarn或npm来实现。

yarn create video
or
npm init video

你已经成功地初始化了你的第一个Remotion项目，你可以使用npm run start来启动该项目。

Default Remotion Project

---

Remotion的基础知识

既然你已经启动了你的Remotion项目，你可以开始创建你的视频。但我认为在这之前，如果你对Remotion的基础知识有一定的了解会更好。

Video Properties

Width, height, durationInFrames, fps是由Remotion提供的视频属性。

你可以在组件中使用这些属性来配置组件的像素大小，该组件应该播放多少帧，以及每秒钟的帧数。

import { useVideoConfig } from “remotion”;export const ExampleVideo = () => {
 const { fps, durationInFrames, width, height } = useVideoConfig();return (
 <div style={
   { flex: 1, justifyContent: “center”, alignItems: “center” }}>
   This video is {durationInFrames / fps} seconds long.
 </div>
 );
};

建议使用useVideoConfig派生这些属性，就像上面的例子一样，使你的组件可以重复使用。

Compositions

Compositions也是Remotion中的一种组件，在这里你可以使用上述属性作为元数据。

import {Composition} from 'remotion';
import {HelloReaders} from './HelloReaders';export const RemotionVideo: React.FC = () => {
 return (
   <>
    <Composition
     id=”HelloReaders”
     component={