跳到主要内容

Path

Click to preview animation

Open in Playground
import {makeScene2D, Path} from '@motion-canvas/2d';
import {createRef} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const path = createRef<Path>();

  view.add(
    <Path
      ref={path}
      lineWidth={4}
      stroke={'#e13238'}
      data="M 151.34904,307.20455 L 264.34904,307.20455 C 264.34904,291.14096 263.2021,287.95455 236.59904,287.95455 C 240.84904,275.20455 258.12424,244.35808 267.72404,244.35808 C 276.21707,244.35808 286.34904,244.82592 286.34904,264.20455 C 286.34904,286.20455 323.37171,321.67547 332.34904,307.20455 C 345.72769,285.63897 309.34904,292.21514 309.34904,240.20455 C 309.34904,169.05135 350.87417,179.18071 350.87417,139.20455 C 350.87417,119.20455 345.34904,116.50374 345.34904,102.20455 C 345.34904,83.30695 361.99717,84.403577 358.75805,68.734879 C 356.52061,57.911656 354.76962,49.23199 353.46516,36.143889 C 352.53959,26.857305 352.24452,16.959398 342.59855,17.357382 C 331.26505,17.824992 326.96549,37.77419 309.34904,39.204549 C 291.76851,40.631991 276.77834,24.238028 269.97404,26.579549 C 263.22709,28.901334 265.34904,47.204549 269.34904,60.204549 C 275.63588,80.636771 289.34904,107.20455 264.34904,111.20455 C 239.34904,115.20455 196.34904,119.20455 165.34904,160.20455 C 134.34904,201.20455 135.49342,249.3212 123.34904,264.20455 C 82.590696,314.15529 40.823919,293.64625 40.823919,335.20455 C 40.823919,353.81019 72.349045,367.20455 77.349045,361.20455 C 82.349045,355.20455 34.863764,337.32587 87.995492,316.20455 C 133.38711,298.16014 137.43914,294.47663 151.34904,307.20455 z"
      position={[-100, -100]}
      scale={0.5}
      start={0}
      end={0}
    ></Path>,
  );

  yield* path().end(1, 1);
  yield* path().fill('#e13238', 1);
});

Path 节点允许我们绘制和动画 SVG 路径。

Path 节点非常适合显示预计算的 SVG 路径，但格式可能令人困惑。如果您想对路径有更直观的控制，并在 Motion Canvas 中控制每个点，我们建议查看 Spline 组件。

定义路径​

我们可以通过设置 Path 节点的 data 属性来指定要显示的路径：

Click to preview animation

Open in Playground
import {makeScene2D, Path} from '@motion-canvas/2d';
import {createRef} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const path = createRef<Path>();

  view.add(
    <Path
      ref={path}
      lineWidth={4}
      stroke={'#e13238'}
      data="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"
      position={[-100, -100]}
      scale={0.25}
    />,
  );
});

动画路径​

在多个路径之间变形​

data 属性可以被 tween，从而创建变形效果：

Click to preview animation

Open in Playground
import {makeScene2D, Path} from '@motion-canvas/2d';
import {createRef} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const path = createRef<Path>();

  view.add(
    <Path
      ref={path}
      lineWidth={4}
      stroke={'#e13238'}
      data="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"
      position={[-100, -100]}
      scale={0.25}
    ></Path>,
  );

  yield* path().data(
    'M25.508,12.011 L576.715,12.011 L576.715,584.766 L25.508,584.766 L25.508,12.011 z',
    1,
  );
});

沿路径动画对象​

像所有扩展 Curve 类的节点一样，Path 节点有一个 getPointAtPercentage 方法，可用于沿路径动画对象：

Click to preview animation

Open in Playground
import {makeScene2D, Path, Rect} from '@motion-canvas/2d';
import {createRef, createSignal} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const path = createRef<Path>();
  const progress = createSignal(0);

  view.add(
    <>
      <Path
        ref={path}
        lineWidth={6}
        stroke={'lightgray'}
        data={
          'M -180 -21 C -180 -54.1371 -153.1371 -81 -120 -81 C -86.8629 -81 -60 -54.1371 -60 -21 C -60 12.1371 -33.1371 33 0 33 C 33.1371 33 48 3 48 -21 C 48 -45 30 -69 0 -69 C -30 -69 -48 -45 -48 -21 C -48 3 -33.1371 33 0 33 C 39 34.5 60 12 60 -21 C 60 -54.1371 86.8629 -81 120 -81 C 153.1371 -81 180 -54.1371 180 -21 C 180 12.1371 153.1371 39 120 39 L -120 39 C -153.1371 39 -180 12.1371 -180 -21 Z'
        }
      />
      <Rect
        size={26}
        fill={'lightseagreen'}
        position={() => path().getPointAtPercentage(progress()).position}
        rotation={() => path().getPointAtPercentage(progress()).tangent.degrees}
      />
    </>,
  );

  yield* progress(1, 2).to(0, 2);
});