本文轉(zhuǎn)載自微信公眾號「TianTianUp」，作者小弋。轉(zhuǎn)載本文請聯(lián)系TianTianUp公眾號。

大家好，我是小弋。

分享的內(nèi)容是:

如何使用 React Remotion 來創(chuàng)建視頻的，如果你之前對視頻很感興趣的話，這篇文章可以參考。

正文

Remotion是一個(gè)最近推出的庫，它允許您使用 React 創(chuàng)建視頻和動態(tài)圖形。作為一名 Web 開發(fā)人員，我發(fā)現(xiàn)它非常有趣，因?yàn)樗鼮槲覀冏约簞?chuàng)建視頻和動畫打開了一扇新的大門。

它的官網(wǎng)：

https://www.remotion.dev/

簡介

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

正如我提到的，Remotion是最近推出的一個(gè)令人興奮的庫，它允許你使用你最喜歡的網(wǎng)絡(luò)技術(shù)，如HTML、CSS、JavaScript、TypeScript等來創(chuàng)建視頻和動畫。

除此之外，你還可以使用你所有關(guān)于編程、函數(shù)、算法、API的知識來為視頻添加各種效果。作為一個(gè)基于React的庫，Remotion能夠最大限度地利用Reacts的特性，如可重用的組件、強(qiáng)大的組合和快速重載。

Remotion還配備了一個(gè)被稱為Remotion Player的播放器，它給你帶來了真正的視頻編輯器的感覺，它可以用瀏覽器來播放和審查你的視頻。

如何設(shè)置Remotion?

創(chuàng)建一個(gè)新的Remotion項(xiàng)目是非常簡單的。但有兩個(gè)依賴項(xiàng)你應(yīng)該先安裝。

步驟1：安裝NodeJS和FFMPEG

由于安裝NodeJS是非常常見的，我將重點(diǎn)介紹安裝FFMPEG。首先，你需要從他們的下載頁面下載合適版本的FFMPEG。

FFMPEG Downloads page.

然后將其解壓到你選擇的文件夾中，并在CMD中以管理員權(quán)限運(yùn)行以下命令(在windows中)來更新你的路徑變量。

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

第2步：啟動新項(xiàng)目

安裝完上述依賴后，初始化一個(gè)新的Remotion視頻只需要一個(gè)命令，你可以使用yarn或npm來實(shí)現(xiàn)。

yarn create video 
or 
npm init video 

你已經(jīng)成功地初始化了你的第一個(gè)Remotion項(xiàng)目，你可以使用npm run start來啟動該項(xiàng)目。

Default Remotion Project

Remotion的基礎(chǔ)知識

既然你已經(jīng)啟動了你的Remotion項(xiàng)目，你可以開始創(chuàng)建你的視頻。但我認(rèn)為在這之前，如果你對Remotion的基礎(chǔ)知識有一定的了解會更好。

Video Properties

Width, height, durationInFrames, fps是由Remotion提供的視頻屬性。

你可以在組件中使用這些屬性來配置組件的像素大小，該組件應(yīng)該播放多少幀，以及每秒鐘的幀數(shù)。

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派生這些屬性，就像上面的例子一樣，使你的組件可以重復(fù)使用。

Compositions

Compositions也是Remotion中的一種組件，在這里你可以使用上述屬性作為元數(shù)據(jù)。

import {Composition} from 'remotion'; 
import {HelloReaders} from './HelloReaders';export const RemotionVideo: React.FC = () => { 
 return ( 
   <> 
    <Composition 
     id=”HelloReaders” 
     component={HelloReaders} 
     durationInFrames={150} 
     fps={30} 
     width={1024} 
     height={720} 
     defaultProps={{ 
      titleText: ‘Welcome to My Blog’, 
      titleColor: ‘black’, 
     }} 
    /> 
    <Composition 
     ... 
    /> 
    <Composition 
     ... 
    /> 
  </> 
 ); 
} 

如果你觀察項(xiàng)目中的Video.tsx文件，你會看到3個(gè)Composition組件，每個(gè)組件中都有元數(shù)據(jù)，包括視頻屬性。

同時(shí)，這些組合也顯示在Remotion Player的左上角。

Compositions List

Animation Properties

當(dāng)涉及到視頻時(shí)，動畫是最重要的，而Remotion為您提供了配置一些驚人的動畫的自由。例如，如果你需要一個(gè)簡單的臉部效果，你可以逐幀調(diào)整幀的不透明度。

const frame = useCurrentFrame(); 
const opacity = frame >= 20 ? 1 : (frame / 20); 
return ( 
 <div style={{ 
   opacity: opacity 
 }}> 
  Hello Readers! 
 </div> 
) 

除此之外，Remotion還有2個(gè)內(nèi)建的函數(shù)，名為interpolate和spring，你可以用它們來建立更高級的動畫。

插值函數(shù)接受4個(gè)輸入?yún)?shù)，包括輸入值(主要是幀)，輸入可以承擔(dān)的范圍值，你想把輸入映射到的數(shù)值范圍，以及一個(gè)可選參數(shù)。

彈簧動畫通過使動畫更自然，讓你在演示中更有創(chuàng)意。例如，下面的彈簧動畫配置會給你的文本添加一個(gè)小的縮放效果。

const {fps} = useVideoConfig(); 
const scale = spring({ 
  fps, 
  from: 0, 
  to: 1, 
  frame 
});return ( 
  <span 
    style={{ 
      color: titleColor, 
      marginLeft: 10, 
      marginRight: 10, 
      transform: `scale(${scale})`, 
      display: ‘inline-block’, 
    }} 
  > 
  Welcome to My Blog 
  </span> 
) 

Spring animation

Sequence Component

Remotion中的 Sequence組件完成了2個(gè)主要任務(wù)。它主要是用來給視頻中的元素分配不同的時(shí)間框架。在保持元素之間的聯(lián)系的同時(shí)，它也允許你重復(fù)使用同一個(gè)組件。

Sequence組件是一個(gè)高階組件，它有能力容納子組件。除此之外，它還接受3個(gè)prop，包括2個(gè)必需的prop和1個(gè)可選的prop。

• name : 這是一個(gè)可選的prop。你指定的名字將出現(xiàn)在Remotion播放器的時(shí)間線上。如果你使用正確的命名模式，你將能夠理解每個(gè)組件是如何連接的。

Timeline View of Remotion Player

• from: 這定義了框架，該組件應(yīng)該出現(xiàn)在視頻中。
• durationInFrames: 以幀為單位的Sequence組件的長度。 

例如，下面的Sequence組件將在20幀后出現(xiàn)在視頻中，并將持續(xù)到結(jié)束，因?yàn)閐urationOnFrames是無限的。

<Sequence from={20} durationInFrames={Infinity}> 
   <Title titleText={titleText} titleColor={titleColor} /></Sequence> 

由于你現(xiàn)在對Remotion中的幾個(gè)基本屬性和組件有了基本的了解，我們可以開始使用Remotion創(chuàng)建第一個(gè)視頻。

創(chuàng)建一個(gè)簡單的視頻

正如你在上面的例子中已經(jīng)看到的，我將創(chuàng)建一個(gè)簡單的視頻來顯示我的博客的標(biāo)志和歡迎詞，并有一些動畫。

我將使用我們在文章開頭創(chuàng)建的默認(rèn)項(xiàng)目布局。

步驟1

首先，我為我的視頻中的3個(gè)元素創(chuàng)建了3個(gè)組件：Logo.tsx, Title.tsx和SubText.tsx。

Logo.tsx file:

import {spring, useCurrentFrame, useVideoConfig} from ‘remotion’; 
import {Img} from ‘remotion’; 
import image from ‘./logo.png’ 
export const Logo: React.FC<{ 
transitionStart: number; 
 }> = ({transitionStart}) => { 
    
  const videoConfig = useVideoConfig(); 
  const frame = useCurrentFrame(); 
   return ( 
   <div 
    style={{ 
     textAlign: ‘center’, 
     marginTop: ‘10%’, 
     width: videoConfig.width, 
     height: videoConfig.height, 
    }} 
   > 
   <Img  
    style={{ 
     transform:`scale(${spring({ 
      fps: videoConfig.fps, 
      frame: frame — transitionStart, 
      config: { 
       damping: 100, 
       stiffness: 200, 
       mass: 0.5, 
      }, 
     })})`, 
    }}  
    src={image}></Img> 
   </div> 
 ); 
}; 

Title.tsx file:

import {spring, useCurrentFrame, useVideoConfig} from 'remotion';export const Title: React.FC<{ 
 titleText: string; 
 titleColor: string; 
}> = ({titleText, titleColor}) => { const videoConfig = useVideoConfig(); 
 const frame = useCurrentFrame(); 
 const text = titleText.split(‘ ‘).map((text) => ` ${text} `); 
 return ( 
  <h1 
   style={{ 
    fontFamily: ‘Helvetica, Arial’, 
    fontWeight: ‘bold’, 
    fontSize: 110, 
    textAlign: ‘center’, 
    position: ‘absolute’, 
    bottom: 160, 
    width: ‘100%’, 
   }} 
  > 
  {text.map((text, i) => { 
   return ( 
    <span 
     key={text} 
     style={{ 
      color: titleColor, 
      marginLeft: 10, 
      marginRight: 10, 
      transform: `scale(${spring({ 
       fps: videoConfig.fps, 
       frame: frame — i * 5, 
       config: { 
        damping: 100, 
        stiffness: 200, 
        mass: 0.5, 
       }, 
      })})`, 
      display: ‘inline-block’, 
     }} 
    > 
    {text} 
    </span> 
   ); 
  })} 
 </h1> 
); 
}; 

SubText.tsx file:

import {interpolate, useCurrentFrame} from 'remotion';export const Title: React.FC<{ 
 titleText: string; 
 titleColor: string; 
}> = ({titleText, titleColor}) => { 
  
 const frame = useCurrentFrame(); 
 const opacity = interpolate(frame, [0, 30], [0, 1]);return ( 
  <div 
   style={{ 
    fontFamily: 'Helvetica, Arial', 
    fontSize: 40, 
    textAlign: 'center', 
    position: 'absolute', 
    bottom: 140, 
    width: '100%', 
    opacity, 
   }} 
  > 
   Follow me on{' '}<code> medium.com </code>{' '} for more articles 
  </div> 
 ); 
}; 

步驟2

然后，我把這3個(gè)組件導(dǎo)入到MyVideo.tsx中，并用Sequence組件包裝，為每個(gè)組件分配相關(guān)的時(shí)間框架。除此之外，我還將幾個(gè)prop和動畫傳遞給子組件。

import {interpolate, Sequence, useCurrentFrame, useVideoConfig} from ‘remotion’; 
import {Logo} from ‘./components/Logo’; 
import {SubText} from ‘./components/SubText’; 
import {Title} from ‘./components/Title’;export const MyVideo: React.FC<{ 
titleText: string; 
titleColor: string; 
}> = ({titleText, titleColor}) => {const frame = useCurrentFrame(); 
const videoConfig = useVideoConfig(); 
const opacity =  
 interpolate( 
  frame, 
  [videoConfig.durationInFrames — 25,  
   videoConfig.durationInFrames 
   15 
  ], 
  [1, 0], 
  {extrapolateLeft: ‘clamp’,extrapolateRight: ‘clamp’,} 
 ); 
const transitionStart = 0;return ( 
 <div style={{flex: 1, backgroundColor: ‘white’}}> 
 <div style={{opacity}}>  <Sequence  
   from={0}  
   durationInFrames={videoConfig.durationInFrames}> 
    <Logo transitionStart={transitionStart} /> 
  </Sequence>  <Sequence  
   from={transitionStart + 35}  
   durationInFrames={Infinity}> 
    <Title titleText={titleText} titleColor={titleColor} /> 
  </Sequence>  <Sequence  
   from={transitionStart + 75}  
   durationInFrames={Infinity}> 
    <SubText /> 
  </Sequence> 
 </div> 
 </div> 
); 
}; 

步驟3

最后，我將上述所有文件導(dǎo)入Video.tsx，并使用Composition組件傳遞相關(guān)元數(shù)據(jù)。

import {Composition} from ‘remotion’; 
import {MyVideo} from ‘./MyVideo’; 
import {Logo} from ‘./components/Logo’; 
import {SubText} from ‘./components/SubText’; 
export const RemotionVideo: React.FC = () => { 
 return ( 
  <> 
   <Composition 
    id=”HelloReaders” 
    component={HelloReaders} 
    durationInFrames={150} 
    fps={30} 
    width={1920} 
    height={1080} 
    defaultProps={{ 
     titleText: ‘Welcome to My Blog’, 
     titleColor: ‘black’, 
    }} 
   /> 
   <Composition 
    id=”Logo” 
    component={Logo} 
    durationInFrames={200} 
    fps={30} 
    width={1920} 
    height={1080} 
   /> 
   <Composition 
    id=”Title” 
    component={SubText} 
    durationInFrames={100} 
    fps={30} 
    width={1920} 
    height={1080} 
   /> 
  </> 
 ); 
}; 

現(xiàn)在，你就可以運(yùn)行你的第一個(gè)Remotion視頻了。你可以使用npm run start在開發(fā)模式下看到它，或者使用npm run build保存為mp4文件。

Finalized Video in Development Mode

結(jié)論

雖然Remotion還很年輕，但它已經(jīng)有了一些驚人的功能。它可能還達(dá)不到專業(yè)視頻編輯器的質(zhì)量。但我們肯定可以期待一些驚喜的到來。

此外，Remotion還有像參數(shù)化渲染、服務(wù)器端渲染和數(shù)據(jù)獲取這樣的功能，這些對于開發(fā)者來說是非常熟悉的。他們可以利用自己的經(jīng)驗(yàn)，從這個(gè)工具中獲得最大的收益。

最重要的是，對于那些尋求創(chuàng)建個(gè)人使用的小視頻或動畫的方法的人來說，它是一個(gè)很好的選擇。

在我看來，我們可以利用Remotion來創(chuàng)建簡單的視頻和動畫，用我們所掌握的網(wǎng)絡(luò)開發(fā)知識。但在視頻編輯功能方面，很多東西需要改進(jìn)和簡化。

不過，我強(qiáng)烈建議你下載Remotion，并給它一個(gè)機(jī)會。這將是一種全新的體驗(yàn)。

謝謝您的閱讀！！!