RemotionをつかってReactで動画を作成してみる

はじめに

こんにちは、エンジニアのkeitaMaxです。

Remotionを使用してみる

インストール

以下コマンドでインストールします。

npm i --save-exact remotion@4.0.240 @remotion/cli@4.0.240

一緒にESLintのプラグインもインストールします。

npm i @remotion/eslint-plugin

以下のように.eslintrc.jsonに追加しました。

  "plugins": [
    "react",
    "tailwindcss",
    "@remotion"
  ],
  "overrides": [
    {
      "files": ["remotion/*.{ts,tsx}"],
      "extends": ["plugin:@remotion/recommended"]
    }
  ],

ファイル

公式通りにやっていきます。以下のようにフォルダを作成しました。

/
└─ remotion
   ├─ Composition.tsx
   ├─ Root.tsx
   └─ index.tsx

それぞれ以下のように公式通りに行なっていきます。

Composition.tsx

export const MyComposition = () => {
  return null
}

Root.tsx

import React from 'react'
import { Composition } from 'remotion'
import { MyComposition } from './Composition'

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="Empty"
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  )
}

index.tsx

import { registerRoot } from "remotion"
import { RemotionRoot } from "./Root"

registerRoot(RemotionRoot)

実行

以下のコマンドで実行してみます。

npx remotion studio remotion/index.ts

するとブラウザが開き以下のような画面が表示されます。

#　少しいじってみる

Root.tsx

import React from 'react'
import { Composition } from 'remotion'
import { MyComposition } from './Composition'

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="Test" // 変更
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  )
}

Composition.tsx

export const MyComposition = () => {
  return (
    <div>
      <h1>テスト</h1>
    </div>
  )
}

こんな感じにすると以下のように出てきます。

もう少しいじってみる

テストという文字をだんだん消したいと思います。

以下のように修正しました。

Composition.tsx

import { interpolate, useCurrentFrame } from "remotion"

export const MyComposition = () => {
  const frame = useCurrentFrame()
  const opacity = interpolate(frame, [0, 30], [1, 0], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  })

  return (
    <h1
      style={{
        opacity,
      }}
    >
      テスト
    </h1>
  )
}

すると、以下のように時間経過で消えていくものができます！

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考