remotion-spline

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion Spline Skill

Remotion Spline 技能

Use the

remotion-spline

package's standalone spline functions to create smooth path animations in Remotion compositions.

使用

remotion-spline

包中的独立样条函数，在Remotion合成内容中创建流畅的路径动画。

Available Functions

可用函数

typescript

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

typescript

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

Point2D

typescript

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

typescript

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

Linear Spline

线性样条

```
evaluateLinearSpline(points: Point2D[], t: number): [number, number]
```
— Evaluate position at parameter
```
t
```
(clamped to [0,1]) along a piecewise-linear path through
```
points
```
.

linearSplineToSVGPath(points: Point2D[]): string

— Convert points to an SVG

M ... L ...

path string.

```
evaluateLinearSpline(points: Point2D[], t: number): [number, number]
```
— 根据参数
```
t
```
（自动限制在[0,1]范围内），计算沿
```
points
```
构成的分段线性路径上的位置。

linearSplineToSVGPath(points: Point2D[]): string

— 将点集转换为SVG的

M ... L ...

路径字符串。

Catmull-Rom Spline

Catmull-Rom 样条

```
evaluateCatmullRom(points: Point2D[], t: number): [number, number]
```
— Evaluate position at parameter
```
t
```
(clamped to [0,1]) along a centripetal Catmull-Rom spline through
```
points
```
. Produces a smooth curve that passes through all control points.
```
catmullRomToSVGPath(points: Point2D[]): string
```
— Convert points to an SVG cubic Bezier path (
```
M ... C ...
```
) that matches the Catmull-Rom curve.

All functions require at least 2 points.

```
evaluateCatmullRom(points: Point2D[], t: number): [number, number]
```
— 根据参数
```
t
```
（自动限制在[0,1]范围内），计算沿
```
points
```
构成的向心Catmull-Rom样条曲线上的位置。该样条会生成一条穿过所有控制点的平滑曲线。
```
catmullRomToSVGPath(points: Point2D[]): string
```
— 将点集转换为与Catmull-Rom曲线匹配的SVG三次贝塞尔路径（
```
M ... C ...
```
）字符串。

所有函数都要求至少传入2个点。

Pattern: Animated Position Along a Spline

实现模式：沿样条路径的位置动画

tsx

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>
  );
};

tsx

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>
  );
};

Tips

提示

```
t=0
```
returns the first point,
```
t=1
```
returns the last point.
Values outside [0,1] are clamped automatically.
Catmull-Rom splines produce smooth curves through all control points — no need to manually compute Bezier handles.
Use
```
linearSplineToSVGPath
```
/
```
catmullRomToSVGPath
```
for static path rendering (racing lines, trails, guides).
Use
```
evaluateLinearSpline
```
/
```
evaluateCatmullRom
```
with a time-varying
```
t
```
for animated position.

当
```
t=0
```
时返回第一个点，
```
t=1
```
时返回最后一个点。
[0,1]范围外的参数值会被自动限制在该区间内。
Catmull-Rom样条可生成穿过所有控制点的平滑曲线——无需手动计算贝塞尔手柄。
使用
```
linearSplineToSVGPath
```
/
```
catmullRomToSVGPath
```
渲染静态路径（如赛道线、轨迹、参考线）。
结合随时间变化的
```
t
```
参数，使用
```
evaluateLinearSpline
```
/
```
evaluateCatmullRom
```
实现位置动画。