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 三次贝塞尔路径（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 渲染静态路径（赛车线、轨迹、引导线）。
• 使用 evaluateLinearSpline / evaluateCatmullRom 配合随时间变化的 t 来实现位置动画。