interactivity-best-practices

インタラクティブ性に関するベストプラクティス

Remotion アニメーションを作成またはレビューする際は、特に Remotion Studio のビジュアルモードで編集できるようにする場合、次のガイドラインに従ってください。

単独の spring() より interpolate() を優先する

ほとんどのアニメーション値には interpolate() を使用してください。

• 人間やエージェントにとって、動作を把握しやすくなります。
• ベジェイージングは CSS でおなじみで、キビキビした動きや跳ねるような動きを表現できます。
• Studio のビジュアルモードでは、interpolate() のキーフレームを編集できます。

アニメーションにバネのような動きが必要な場合は、編集可能な値を interpolate() に保持し、イージング関数として Easing.spring() を渡してください。

次のようにします。

style={{
  scale: interpolate(frame, [0, 30], [0, 1], {
    easing: Easing.spring({
      damping: 200,
    }),
  }),
}}

❌ 同じ動きを interpolate() のイージングで表現できる場合、独立したドライバーとして spring() を使用するのは避けてください。

const scale = spring({
  frame,
  fps,
  config: {
    damping: 200,
  },
});

style={{
  scale,
}}

Easing.spring() は damping、mass、stiffness、overshootClamping をサポートします。補間の進行度に合わせて正規化されるため、frame、fps、from、to、delay、reverse、durationInFrames、durationRestThreshold は受け取りません。

interpolate() のイージングとして表現できない、フレーム駆動の物理的なバネシミュレーションがアニメーションに特に必要な場合に限り、単独の spring() を使用してください。

個別の CSS transform プロパティを優先する

transform 文字列を組み立てるのではなく、scale、rotate、translate などの個別の CSS transform プロパティを使用してください。

次のようにします。

style={{
  scale: interpolate(frame, [0, 100], [0, 2]),
}}

❌ 次のような書き方は避けてください。

style={{
  transform: `scale(${interpolate(frame, [0, 100], [0, 2])})`,
}}

個別の transform プロパティは Studio のビジュアルモードで編集できます。transform 文字列内に隠れた値は編集できません。

編集可能な値はインラインにする

値を視覚的に編集できるようにする場合は、補間を JSX の style オブジェクトに直接記述してください。

次のようにします。

style={{
  scale: interpolate(frame, [0, 100], [0, 2]),
}}

❌ 次のような書き方は避けてください。

const scale = interpolate(frame, [0, 100], [0, 2]);

style={{
  scale,
}}

インラインの計算とリテラル値を使うと、Studio のビジュアルモードでキーフレームや props を検出して編集できます。

これはエフェクトのパラメーターにも当てはまります。編集可能なエフェクト値は、エフェクト呼び出し内にインラインで記述してください。

次のようにします。

effects={[
  radialProgressiveBlur({
    center: [0.5, 0.5],
    point1: [0.86, 0.36],
    point2: [0.68, 0.84],
  }),
]}

❌ 編集可能な値を定数の背後に隠すのは避けてください。

const center = [0.5, 0.5] as const;

effects={[
  radialProgressiveBlur({
    center,
  }),
]}

エフェクトは条件分岐なしで指定する

effects prop を使用する場合、エフェクト配列の形状に条件分岐を設けないでください。Studio のビジュアルモードでは、条件式の背後にのみ存在するエフェクトを確実に編集できません。

一方のバージョンだけにエフェクトを適用する場合は、要素を分けてレンダリングしてください。

<CanvasImage src={src} width={1280} height={720} />
<CanvasImage
  src={src}
  width={1280}
  height={720}
  effects={[
    blur({
      radius: interpolate(frame, [0, 100], [0, 40]),
    }),
  ]}
/>

❌ エフェクトを条件付きで含めるのは避けてください。

<CanvasImage
  src={src}
  width={1280}
  height={720}
  effects={enabled ? [blur({radius: 40})] : []}
/>

編集可能なエフェクトのパラメーターは、条件分岐のないエフェクト呼び出し内にインラインで記述してください。座標、色、数値コントロール、補間などの編集可能な値に変数を渡さないでください。

回転と移動は直接補間する

rotate と translate には、CSS の単位付き文字列を直接補間してください。

次のようにします。

style={{
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
}}

❌ プロパティを直接補間できる場合、補間した数値の前後に文字列を手動で組み立てるのは避けてください。

これらのプロパティの直接補間はサポートされており、Studio のビジュアル編集でもより適切に動作します。

調整可能な要素には Interactive.* を使用する

Studio で調整する可能性が高い要素には、remotion の Interactive 名前空間を使用してください。

import {Interactive} from "remotion";

例：

<Interactive.Div
  style={{
    color: "red",
    fontSize: 80,
  }}
>
  Hello
</Interactive.Div>

<Interactive.Div>、<Interactive.Span>、その他の Interactive.* コンポーネントは通常の HTML 要素と同様に動作しますが、Studio でのインタラクティブな操作が可能になります。

これらの要素のインラインスタイル（テキストの色やフォントサイズなど）は、インタラクティブに標準化できます。