GSAP MotionPathPlugin粒子沿路径运动后回退问题求助

你的粒子运动完成后回到起始位置，核心原因是SVG中用于MotionPath的<path>是闭合路径（路径从起点出发后，最后又回到了起点坐标），GSAP的MotionPathPlugin会沿着整个完整路径执行动画，包括返回起点的那段路径。

以下两种方案可以解决这个问题：

方案1：修改SVG路径为非闭合路径 #

直接修改SVG中<path>和<clipPath>内的路径数据，只保留从起点到终点的单向贝塞尔曲线，去掉返回起点的部分：

<svg viewBox="0 0 1000 1000" class="group-elements" data-motion-path="M 0 0 C 432 0 576 291 884 291">
    <path d="M 0 0 C 432 0 576 291 884 291" fill="url(#start-lgradient-base-lines)"></path>
    <clipPath id="start-clip-path-0">
        <path d="M 0 0 C 432 0 576 291 884 291"></path>
    </clipPath>
    <rect id="start-rect-0" width="100%" height="100%" fill="url(#start-lgradient-02)" clip-path="url(#start-clip-path-0)" x="-100%"></rect>
    <g class="dot" style="opacity: 0;">
        <circle r="30" fill="url(#start-rgradient-dot-back)"></circle>
        <circle r="15" fill="url(#start-rgradient-dot-front)"></circle>
        <circle r="2.25" fill="white"></circle>
    </g>
</svg>

修改后路径为单向非闭合，粒子运动到终点后会自然停止。

方案2：在MotionPath配置中指定路径起止范围 #

如果不想修改SVG路径，可以在MotionPath的配置项中添加start和end参数，强制动画只执行路径的从起点到终点的部分：

const groups = document.querySelectorAll(".group-elements");

gsap.registerPlugin(MotionPathPlugin);

const timeline = gsap.timeline();
groups.forEach((group, index) => {
  const particle = group.querySelector("g.dot");
  const path = group.querySelector("path");
  const clipPath = group.querySelector("clipPath");
  const rect = group.querySelector("rect");
  gsap.set(particle, { opacity: 1 });
  timeline.to(
    particle,
    {
      duration: 5,
      ease: "power2.inOut",
      motionPath: {
        path: path,
        align: path,
        alignOrigin: [0.5, 0.5],
        autoRotate: 90,
        start: 0, // 从路径起点开始
        end: 1    // 到路径终点结束
      }
    },
    index 
  );
});

start和end接受0-1之间的数值，对应路径的百分比进度。设置为start:0和end:1后，动画只会沿路径的单向段运动，不会执行返回起点的部分。

内容的提问来源于stack exchange，提问作者Weilory