革命性的視頻創(chuàng)建：忘記專業(yè)軟件和多年培訓(xùn)！ 現(xiàn)在，Web開發(fā)人員可以利用其現(xiàn)有的HTML，CSS和React JS專業(yè)知識(shí)來使用Enemotion制作令人驚嘆的動(dòng)畫視頻。 這個(gè)創(chuàng)新的JavaScript工具包使開發(fā)人員能夠使用熟悉的編碼技術(shù)構(gòu)建復(fù)雜的動(dòng)畫。

>本文探討了遠(yuǎn)程，指導(dǎo)您介紹其功能并展示實(shí)際示例。 完整的代碼可在github上找到。

鍵突出顯示：

• 利用現(xiàn)有技能：>簡化的設(shè)置：
通過NPM輕松安裝可讓您快速創(chuàng)建視頻。
• > > 熟悉的開發(fā)范式：
采用熟悉的Web開發(fā)概念，例如React組件，道具和狀態(tài)，以增強(qiáng)可重復(fù)性和靈活性。
• 強(qiáng)大的動(dòng)畫支持：利用輔助函數(shù)
和
• >創(chuàng)建動(dòng)態(tài)和引人入勝的視頻內(nèi)容。 實(shí)時(shí)預(yù)覽：interpolate一個(gè)基于集成的瀏覽器播放器允許實(shí)時(shí)視頻預(yù)覽和調(diào)試。spring
• 綜合指南：本文提供了適合初學(xué)者和經(jīng)驗(yàn)豐富的開發(fā)人員的詳細(xì)說明和代碼示例。
遠(yuǎn)程：原因和方式 由喬尼·伯格（Jonny Burger）開發(fā)的
• 遠(yuǎn)程，降低了視頻動(dòng)畫的進(jìn)入障礙。 傳統(tǒng)的視頻創(chuàng)建需要專門的軟件和廣泛的培訓(xùn)。 Enemotion通過利用JavaScript開發(fā)人員的技能向更廣泛的受眾開放了這一領(lǐng)域。 這種方法還可以根據(jù)參數(shù)或集成的構(gòu)建管道等創(chuàng)新的工作流，例如自動(dòng)化視頻生成。
入門

遠(yuǎn)程使用NPM提供了簡單的設(shè)置。 確保您安裝了節(jié)點(diǎn)和NPM（請(qǐng)參閱節(jié)點(diǎn)安裝指南以獲取幫助，以及有關(guān)Linux特定說明的“遠(yuǎn)程安裝指南”）。 創(chuàng)建一個(gè)新項(xiàng)目：

>命名您的項(xiàng)目（例如，

），導(dǎo)航到項(xiàng)目目錄，然后啟動(dòng)默認(rèn)視頻項(xiàng)目：

>瀏覽器窗口將打開（或?qū)Ш降?/p>），顯示用于預(yù)覽和調(diào)試創(chuàng)建的實(shí)時(shí)視頻播放器。檢查Enemotion提供的演示示例以獲取初始指導(dǎo)。

>

npm init video

一個(gè)簡單的動(dòng)畫：“你好，世界！”

my-video>

>讓我們創(chuàng)建一個(gè)文本“ Hello，World！”的基本動(dòng)畫。 刪除現(xiàn)有的示例代碼（src文件夾），然后在Demo>中創(chuàng)建src目錄。內(nèi)部Demo，創(chuàng)建Demo.js：

>

npm init video

在Hello.js>目錄中（如原始文章中的代碼）中創(chuàng)建Title.js和Demo。 創(chuàng)建demo.css（如原始文章中的代碼）。最后，創(chuàng)建src/index.js：

cd my-video
npm start

運(yùn)行動(dòng)畫：./node_modules/.bin/remotion preview src/index.js或更新您的package.json's start腳本。

構(gòu)建星球大戰(zhàn)動(dòng)畫

>

建立在“你好，世界！”上的建立。例如，讓我們創(chuàng)建一個(gè)星球大戰(zhàn)風(fēng)格的介紹。這涉及創(chuàng)建星光背景和滾動(dòng)黃色文字。 如原始文章中所述，創(chuàng)建必要的文件和文件夾。 原始文章中提供了src/starWarsIndex.js>，src/StarWars/starWars.js，src/StarWars/starsBackground.js，src/StarWars/starWars.css的代碼。切記安裝src/StarWars/starsBackground.css：lorem-ipsum。將npm i lorem-ipsum腳本添加到"start:starwars">。package.json>

高級(jí)功能（簡短概述）>

遠(yuǎn)程提供了這些示例以外的高級(jí)功能：

>
• 數(shù)據(jù)獲?。?strong>>在構(gòu)建時(shí)間中使用和continueRender的掛鉤進(jìn)行數(shù)據(jù)獲取數(shù)據(jù)。delayRender>
• >參數(shù)化渲染：通過自動(dòng)視頻生成的構(gòu)建命令傳遞數(shù)據(jù)。>
>資產(chǎn)導(dǎo)入：
• 導(dǎo)入圖像，視頻和音頻文件。

結(jié)論

依據(jù)使網(wǎng)絡(luò)開發(fā)人員能夠使用現(xiàn)有技能創(chuàng)建專業(yè)質(zhì)量的動(dòng)畫視頻。 探索其功能并解鎖基于代碼的視頻動(dòng)畫的潛力。 這兩個(gè)示例的完整代碼均可在GitHub上獲得。 在Twitter上分享您的創(chuàng)作！ 原始文章的常見問題解答部分仍然相關(guān)，并且在這里被省略了。

>

以上是學(xué)習(xí)遠(yuǎn)程：使用HTML，CSS和React創(chuàng)建動(dòng)畫視頻的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！