怎么使用React创建视频和动画

正文

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/MPATH"path\to\ffmpeg\bin;%PATH%"

第2步：启动新项目

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

yarncreatevideoornpminitvideo

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

Default Remotion Project

Remotion的基础知识

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

Video Properties

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

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

import{useVideoConfig}from“remotion”;exportconstExampleVideo=()=>{const{fps,durationInFrames,width,height}=useVideoConfig();return(<pstyle={{flex:1,justifyContent:“center”,alignItems:“center”}}>Thisvideois{durationInFrames/fps}secondslong.</p>);};

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

Compositions

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

import{Composition}from'remotion';import{HelloReaders}from'./HelloReaders';exportconstRemotionVideo:React.FC=()=>{return(<><Compositionid=”HelloReaders”component={HelloReaders}durationInFrames={150}fps={30}width={1024}height={720}defaultProps={{titleText:&lsquo;WelcometoMyBlog&rsquo;,titleColor:&lsquo;black&rsquo;,}}/><Composition.../><Composition.../></>);}

如果你观察项目中的Video.tsx文件，你会看到3个Composition组件，每个组件中都有元数据，包括视频属性。

同时，这些组合也显示在Remotion Player的左上角。

Compositions List

Animation Properties

当涉及到视频时，动画是最重要的，而Remotion为您提供了配置一些惊人的动画的自由。例如，如果你需要一个简单的脸部效果，你可以逐帧调整帧的不透明度。

constframe=useCurrentFrame();constopacity=frame>=20?1:(frame/20);return(<pstyle={{opacity:opacity}}>HelloReaders!</p>)

除此之外，Remotion还有2个内建的函数，名为interpolate和spring，你可以用它们来建立更高级的动画。

插值函数接受4个输入参数，包括输入值(主要是帧)，输入可以承担的范围值，你想把输入映射到的数值范围，以及一个可选参数。

弹簧动画通过使动画更自然，让你在演示中更有创意。例如，下面的弹簧动画配置会给你的文本添加一个小的缩放效果。

const{fps}=useVideoConfig();constscale=spring({fps,from:0,to:1,frame});return(<spanstyle={{color:titleColor,marginLeft:10,marginRight:10,transform:`scale(${scale})`,display:&lsquo;inline-block&rsquo;,}}>WelcometoMyBlog</span>)

Spring animation

Sequence Component

Remotion中的 Sequence组件完成了2个主要任务。它主要是用来给视频中的元素分配不同的时间框架。在保持元素之间的联系的同时，它也允许你重复使用同一个组件。

Sequence组件是一个高阶组件，它有能力容纳子组件。除此之外，它还接受3个prop，包括2个必需的prop和1个可选的prop。

name : 这是一个可选的prop。你指定的名字将出现在Remotion播放器的时间线上。如果你使用正确的命名模式，你将能够理解每个组件是如何连接的。

Timeline View of Remotion Player

from: 这定义了框架，该组件应该出现在视频中。
durationInFrames: 以帧为单位的Sequence组件的长度。

例如，下面的Sequence组件将在20帧后出现在视频中，并将持续到结束，因为durationOnFrames是无限的。

<Sequencefrom={20}durationInFrames={Infinity}><TitletitleText={titleText}titleColor={titleColor}/></Sequence>

由于你现在对Remotion中的几个基本属性和组件有了基本的了解，我们可以开始使用Remotion创建第一个视频。

创建一个简单的视频

正如你在上面的例子中已经看到的，我将创建一个简单的视频来显示我的博客的标志和欢迎词，并有一些动画。

我将使用我们在文章开头创建的默认项目布局。

步骤1

首先，我为我的视频中的3个元素创建了3个组件：Logo.tsx, Title.tsx和SubText.tsx。

Logo.tsx file:

import{spring,useCurrentFrame,useVideoConfig}from&lsquo;remotion&rsquo;;import{Img}from&lsquo;remotion&rsquo;;importimagefrom&lsquo;./logo.png&rsquo;exportconstLogo:React.FC<{transitionStart:number;}>=({transitionStart})=>{constvideoConfig=useVideoConfig();constframe=useCurrentFrame();return(<pstyle={{textAlign:&lsquo;center&rsquo;,marginTop:&lsquo;10%&rsquo;,width:videoConfig.width,height:videoConfig.height,}}><Imgstyle={{transform:`scale(${spring({fps:videoConfig.fps,frame:frame&mdash;transitionStart,config:{damping:100,stiffness:200,mass:0.5,},})})`,}}src={image}></Img></p>);};

Title.tsx file:

import{spring,useCurrentFrame,useVideoConfig}from'remotion';exportconstTitle:React.FC<{titleText:string;titleColor:string;}>=({titleText,titleColor})=>{constvideoConfig=useVideoConfig();constframe=useCurrentFrame();consttext=titleText.split(&lsquo;&lsquo;).map((text)=>`${text}`);return(<h2style={{fontFamily:&lsquo;Helvetica,Arial&rsquo;,fontWeight:&lsquo;bold&rsquo;,fontSize:110,textAlign:&lsquo;center&rsquo;,position:&lsquo;absolute&rsquo;,bottom:160,width:&lsquo;100%&rsquo;,}}>{text.map((text,i)=>{return(<spankey={text}style={{color:titleColor,marginLeft:10,marginRight:10,transform:`scale(${spring({fps:videoConfig.fps,frame:frame&mdash;i*5,config:{damping:100,stiffness:200,mass:0.5,},})})`,display:&lsquo;inline-block&rsquo;,}}>{text}</span>);})}</h2>);};

SubText.tsx file:

import{interpolate,useCurrentFrame}from'remotion';exportconstTitle:React.FC<{titleText:string;titleColor:string;}>=({titleText,titleColor})=>{constframe=useCurrentFrame();constopacity=interpolate(frame,[0,30],[0,1]);return(<pstyle={{fontFamily:'Helvetica,Arial',fontSize:40,textAlign:'center',position:'absolute',bottom:140,width:'100%',opacity,}}>Followmeon{''}<code>medium.com</code>{''}formorearticles</p>);};

步骤2

然后，我把这3个组件导入到MyVideo.tsx中，并用Sequence组件包装，为每个组件分配相关的时间框架。除此之外，我还将几个prop和动画传递给子组件。

import{interpolate,Sequence,useCurrentFrame,useVideoConfig}from&lsquo;remotion&rsquo;;import{Logo}from&lsquo;./components/Logo&rsquo;;import{SubText}from&lsquo;./components/SubText&rsquo;;import{Title}from&lsquo;./components/Title&rsquo;;exportconstMyVideo:React.FC<{titleText:string;titleColor:string;}>=({titleText,titleColor})=>{constframe=useCurrentFrame();constvideoConfig=useVideoConfig();constopacity=interpolate(frame,[videoConfig.durationInFrames&mdash;25,videoConfig.durationInFrames15],[1,0],{extrapolateLeft:&lsquo;clamp&rsquo;,extrapolateRight:&lsquo;clamp&rsquo;,});consttransitionStart=0;return(<pstyle={{flex:1,backgroundColor:&lsquo;white&rsquo;}}><pstyle={{opacity}}><Sequencefrom={0}durationInFrames={videoConfig.durationInFrames}><LogotransitionStart={transitionStart}/></Sequence><Sequencefrom={transitionStart+35}durationInFrames={Infinity}><TitletitleText={titleText}titleColor={titleColor}/></Sequence><Sequencefrom={transitionStart+75}durationInFrames={Infinity}><SubText/></Sequence></p></p>);};

步骤3

最后，我将上述所有文件导入Video.tsx，并使用Composition组件传递相关元数据。

import{Composition}from&lsquo;remotion&rsquo;;import{MyVideo}from&lsquo;./MyVideo&rsquo;;import{Logo}from&lsquo;./components/Logo&rsquo;;import{SubText}from&lsquo;./components/SubText&rsquo;;exportconstRemotionVideo:React.FC=()=>{return(<><Compositionid=”HelloReaders”component={HelloReaders}durationInFrames={150}fps={30}width={1920}height={1080}defaultProps={{titleText:&lsquo;WelcometoMyBlog&rsquo;,titleColor:&lsquo;black&rsquo;,}}/><Compositionid=”Logo”component={Logo}durationInFrames={200}fps={30}width={1920}height={1080}/><Compositionid=”Title”component={SubText}durationInFrames={100}fps={30}width={1920}height={1080}/></>);};

现在，你就可以运行你的第一个Remotion视频了。你可以使用npm run start在开发模式下看到它，或者使用npm run build保存为mp4文件。

Finalized Video in development Mode