Skip to main content

evolvePath()

属于@remotion/paths包。

将SVG路径从不可见状态动画到完全长度。该函数接受两个参数：

  • progress 是朝向完全演变的进度，其中 0 表示路径不可见，1 表示路径完全绘制出来。

    note

    传入大于 1 的值将导致路径的起点逐渐消失。传入小于 0 的值将导致路径从末尾开始绘制。

  • path 必须是有效的SVG路径。

返回值将是一个包含strokeDasharray和strokeDashoffset值的对象，这些值应该传递给<path>元素。

tsx
import { evolvePath } from "@remotion/paths";
 
const path = "M 0 0 L 100 0";
const evolution = evolvePath(0.5, path);
console.log(evolution); // { strokeDasharray: '100 100',  strokeDashoffset: 50 }
 
const element = (
  <path
    d={path}
    strokeDasharray={evolution.strokeDasharray}
    strokeDashoffset={evolution.strokeDashoffset}
  />
);
tsx
import { evolvePath } from "@remotion/paths";
 
const path = "M 0 0 L 100 0";
const evolution = evolvePath(0.5, path);
console.log(evolution); // { strokeDasharray: '100 100',  strokeDashoffset: 50 }
 
const element = (
  <path
    d={path}
    strokeDasharray={evolution.strokeDasharray}
    strokeDashoffset={evolution.strokeDashoffset}
  />
);

另请参阅​