Closed15

話題のRemotionで遊んでみた

うじまるうじまる

Remotionとは?

https://www.remotion.dev/
Reactで動画が作れるというもの

Webブラウザで動くものなら何でも動く雰囲気があるのでWebGLとかで動画作ったら楽しそう

うじまるうじまる

yarn create videonpx create-video をするとテンプレートから作成される
便利

うじまるうじまる

エントリーポイント

import {registerRoot} from 'remotion';
import {RemotionVideo} from './Video';

registerRoot(RemotionVideo);

Reactで言う renderregisterRoot っぽい

うじまるうじまる

テンプレートから生成されると npm start でプレビューできるPlayerが起動する

うじまるうじまる

このプレビューは単純にReactのコンポーネントが描画されているだけっぽい(この時点では動画ではない)
ので、プレビューも普通のHotReloadと同じような感じでおこなわれる

うじまるうじまる

この部分に表示されるのが Composition コンポーネントで定義したもの
https://www.remotion.dev/docs/composition

This is the component to use to register a video to make it renderable and make it show up in the sidebar of the Remotion Player.

プレビューのために定義するものっぽい

うじまるうじまる

ここでCSSアニメーションを使えるのか?という感じになるが結果としては無理そう

このフレームワークは、動画の現在のFrameをStateとして持つアプリケーションとして捉えるのが良さそう。
結果として、CSSアニメーションは何らかの値でアニメーションが進むものではないのでこのフレームワークでは利用出来ない(多分)

うじまるうじまる

interpolate

補完してくれる関数

シグネチャはこんな感じ

declare type ExtrapolateType = 'extend' | 'identity' | 'clamp';
export declare function interpolate(
    input: number,
    inputRange: [number, number],
    outputRange: [number, number],
    options?: {
        easing?: (input: number) => number;
        extrapolateLeft?: ExtrapolateType;
        extrapolateRight?: ExtrapolateType;
}): number;

optionで easing が指定できるがガッツリ関数を定義しないといけないのでCSSAnimation的なノリでeasingがやりづらそう。(ヘルパー関数としてPR出すのはあり・・?)

うじまるうじまる

spring

物理的な挙動をしてくれるそれっぽい

interpolate のinputとして使うと良さそう

うじまるうじまる

まとめ

  • Reactで作った物が動画になるのは面白い
  • ただ、慣れるまで・ベストな状態管理が見いだせるまではちょっとしんどい
  • CSSアニメーションに対応してほしい
  • 図形をアニメーションに使うならSVGを使ったほうが良い
  • SSRもできるっぽいのでユーザーのリクエストに応じてコンテンツを変えるとか楽しそう
  • mp4 -> gif にして動くOGPとか(負荷がつらそうだけど)
hashitohashito

参考になりました。
Reactは不慣れなのでCSSができればいいと思ったのですが、CSSが未対応というのが残念です。

このスクラップは2021/02/10にクローズされました