remotion-spline

Remotion Spline スキル

remotion-spline パッケージのスタンドアロンのスプライン関数を使用して、Remotion コンポジションで滑らかなパスアニメーションを作成します。

利用可能な関数

import {
  evaluateLinearSpline,
  linearSplineToSVGPath,
  evaluateCatmullRom,
  catmullRomToSVGPath,
  type Point2D,
} from "remotion-spline";

Point2D

interface Point2D {
  readonly x: number;
  readonly y: number;
}

線形スプライン

• evaluateLinearSpline(points: Point2D[], t: number): [number, number] — points を通る区分線形パス上のパラメーター t（[0,1] にクランプ）における位置を評価します。
• linearSplineToSVGPath(points: Point2D[]): string — 点を SVG の M ... L ... パス文字列に変換します。

Catmull-Rom スプライン

• evaluateCatmullRom(points: Point2D[], t: number): [number, number] — points を通る遠心 Catmull-Rom スプライン上のパラメーター t（[0,1] にクランプ）における位置を評価します。すべての制御点を通る滑らかな曲線を生成します。
• catmullRomToSVGPath(points: Point2D[]): string — 点を、Catmull-Rom 曲線に一致する SVG の 3 次ベジェパス（M ... C ...）に変換します。

すべての関数には、少なくとも 2 つの点が必要です。

パターン：スプラインに沿った位置のアニメーション

import { useCurrentFrame, useVideoConfig } from "remotion";
import { evaluateCatmullRom, catmullRomToSVGPath, type Point2D } from "remotion-spline";

const points: Point2D[] = [
  { x: 100, y: 500 },
  { x: 300, y: 200 },
  { x: 600, y: 400 },
];

export const MyAnimation: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  const t = frame / (durationInFrames - 1);
  const [x, y] = evaluateCatmullRom(points, t);
  const pathD = catmullRomToSVGPath(points);

  return (
    <svg viewBox="0 0 800 800">
      {/* Static path */}
      <path d={pathD} stroke="blue" strokeWidth="2" fill="none" />
      {/* Animated dot */}
      <circle cx={x} cy={y} r="10" fill="red" />
    </svg>
  );
};

ヒント

• t=0 は最初の点を返し、t=1 は最後の点を返します。
• [0,1] の範囲外の値は自動的にクランプされます。
• Catmull-Rom スプラインはすべての制御点を通る滑らかな曲線を生成するため、ベジェのハンドルを手動で計算する必要はありません。
• 静的なパスの描画（レーシングライン、軌跡、ガイド）には、linearSplineToSVGPath / catmullRomToSVGPath を使用します。
• アニメーションする位置には、時間とともに変化する t とともに evaluateLinearSpline / evaluateCatmullRom を使用します。