Skip to main content

evolvePath()

属于 @remotion/paths 软件包的一部分.

🌐 Part of the @remotion/paths package.

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

🌐 Animates an SVG path from being invisible to it's full length. The function takes two arguments:

  • progress 是指向完全进化的进度，其中 0 表示路径不可见，1 表示路径完全绘制完成。 :::注意 传入大于1的值会导致路径起点退化。传入小于0的值会导致路径从终点开始进化。 :::
  • path 必须是一个有效的 SVG 路径。

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

🌐 The return value will be an object containing strokeDasharray and strokeDashoffset values, which should be passed to the <path> element.

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

另请参阅​

🌐 See also

Last updated on