reaction視頻怎么制作(怎么使用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

結論

雖然Remotion還很年輕,但它已經有了一些驚人的功能。它可能還達不到專業視頻編輯器的質量。但我們肯定可以期待一些驚喜的到來。

此外,Remotion還有像參數化渲染、服務器端渲染和數據獲取這樣的功能,這些對于開發者來說是非常熟悉的。他們可以利用自己的經驗,從這個工具中獲得最大的收益。

最重要的是,對于那些尋求創建個人使用的小視頻或動畫的方法的人來說,它是一個很好的選擇。

在我看來,我們可以利用Remotion來創建簡單的視頻和動畫,用我們所掌握的網絡開發知識。但在視頻編輯功能方面,很多東西需要改進和簡化。

不過,我強烈建議你下載Remotion,并給它一個機會。這將是一種全新的體驗。

感謝你能夠認真閱讀完這篇文章,希望小編分享的“怎么使用React創建視頻和動畫 ”這篇文章對大家有幫助,同時也希望大家多多支持本站,關注本站行業資訊頻道,更多相關知識等著你來學習!