ビデオ作成の革命：専門のソフトウェアと長(zhǎng)年のトレーニングを忘れてください！ 現(xiàn)在、Web開(kāi)発者は、既存のHTML、CSS、およびJSの専門知識(shí)を反応して、Remotionを使用して見(jiàn)事なアニメーションビデオを作成できます。 この革新的なJavaScript Toolkitは、開(kāi)発者がおなじみのコーディング技術(shù)を使用して複雑なアニメーションを構(gòu)築できるようにします。

この記事では、Remotionを調(diào)査し、その能力を?qū)Гg用的な例を紹介します。 完全なコードはgithubで利用できます。

キーハイライト：

• 既存のスキルを活用してください：Remotionは、既存のJavaScript、HTML、およびCSSの知識(shí)を利用して、従來(lái)のビデオ編集ソフトウェアの必要性を排除します。
合理化されたセットアップ：NPM経由の簡(jiǎn)単なインストールで動(dòng)畫(huà)をすばやく作成します。
• 馴染みのある開(kāi)発パラダイム：再利用性と柔軟性を向上させるために、Reactコンポーネント、小道具、狀態(tài)などのおなじみのWeb開(kāi)発の概念を採(cǎi)用しています。
• 強(qiáng)力なアニメーションサポート：などのヘルパー関數(shù)を利用して、動(dòng)的で魅力的なビデオコンテンツを作成します。
• リアルタイムのプレビュー：統(tǒng)合されたブラウザベースのプレーヤーは、リアルタイムビデオプレビューとデバッグを許可します。 interpolate包括的なガイド：springこの記事は、初心者と経験豊富な開(kāi)発者の両方に適した詳細(xì)な指示とコードの例を提供します。
• remotion：なぜ、どのように
Jonny Burgerによって開(kāi)発された
• Remotionは、ビデオアニメーションのエントリへの障壁を下げます。 従來(lái)のビデオ作成には、専門的なソフトウェアと広範(fàn)なトレーニングが必要です。 Remotionは、JavaScript開(kāi)発者のスキルを活用することにより、この分野をより幅広い視聴者に開(kāi)きます。 このアプローチは、パラメーターや統(tǒng)合されたビルドパイプラインに基づいて、自動(dòng)ビデオ生成などの革新的なワークフローを可能にします。 始めましょう

Remotionは、NPMを使用した簡(jiǎn)単なセットアップを提供します。 NodeとNPMがインストールされていることを確認(rèn)してください（支援については、Linux固有の指示についてはNodeインストールガイドと、Remotionインストールガイドを參照してください）。 新しいプロジェクトを作成する：

プロジェクト（例えば、

）に名前を付けて、プロジェクトディレクトリに移動(dòng)し、デフォルトのビデオプロジェクトを開(kāi)始します：

ブラウザウィンドウが開(kāi)きます（またはに移動(dòng)します）。 Remotionが提供する最初のガイダンスのために提供されたデモの例を調(diào)べます。

シンプルなアニメーション：「こんにちは、世界！」

npm init video

テキスト「Hello、World！」の基本的なアニメーションを作成しましょう。 既存のサンプルコード（srcフォルダー）を削除し、Demo內(nèi)でsrcディレクトリを作成します。內(nèi)部Demo、Demo.js：

を作成します

npm init video

Hello.jsおよびTitle.jsを作成して、Demoディレクトリ內(nèi)に（元の記事のようなコード）を作成します。 demo.css（元の記事のようにコード）を作成します。最後に、src/index.js：

を作成します

cd my-video
npm start

アニメーションを?qū)g行するか：./node_modules/.bin/remotion preview src/index.jsまたはpackage.json 'sstartスクリプトを更新してください。

スターウォーズのアニメーションの構(gòu)築

「こんにちは、世界！」たとえば、スターウォーズスタイルのイントロを作成しましょう。これには、星空の背景を作成し、黃色のテキストをスクロールすることが含まれます。 元の記事で説明されているように、必要なファイルとフォルダーを作成します。 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ī)能（簡(jiǎn)単な概要）

Remotionは、これらの例を超えた高度な機(jī)能を提供します：

• データフェッチ：動(dòng)的ビデオコンテンツのcontinueRenderやdelayRenderなどのフックを使用して、ビルド時(shí)間中にデータを取得します。
• パラメーター化されたレンダリング：自動(dòng)ビデオ生成のためにビルドコマンドを介してデータを渡す。
• アセットのインポート：畫(huà)像、ビデオ、およびオーディオファイルをインポートします。

結(jié)論

Remotionは、Web開(kāi)発者が既存のスキルを使用して専門的な品質(zhì)のアニメーションビデオを作成できるようにします。 その機(jī)能を調(diào)査し、コードベースのビデオアニメーションの可能性を解き放ちます。 両方の例の完全なコードは、GitHubで入手できます。 Twitterであなたの作品を共有してください！ 元の記事のFAQSセクションは関連性があり、簡(jiǎn)潔にするためにここでは省略されています。

以上がRemotionを?qū)Wぶ：HTML、CSS＆Reactでアニメーションビデオを作成するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。