如何在React中用GSAP实现无限符号SVG路径的逐段渐入动画

问题核心 #

需要让无限符号SVG路径按从起点到终点的顺序缓慢渐入显示，而非整体一次性出现。当前代码仅能实现路径整体渐入，不符合预期。

解决方案 #

要实现路径逐段绘制的效果，核心是通过控制SVG路径的stroke-dasharray和stroke-dashoffset属性模拟绘制过程，GSAP提供了便捷的插件或手动实现方式：

方案1：使用GSAP官方DrawSVG插件（推荐） #

该插件封装了路径绘制的底层逻辑，代码更简洁：

1. 安装依赖

npm install gsap @gsap/react

2. React组件实现

import React, { useRef, useEffect } from 'react';
import gsap from 'gsap';
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';

// 注册GSAP插件
gsap.registerPlugin(DrawSVGPlugin);

const InfinityPathAnimation = () => {
  const pathRef = useRef(null);

  useEffect(() => {
    // 初始化路径为完全隐藏状态
    gsap.set(pathRef.current, { drawSVG: '0% 0%' });

    // 创建路径绘制动画：从0%到100%逐步显示
    const timeline = gsap.timeline();
    timeline.to(pathRef.current, {
      drawSVG: '0% 100%',
      duration: 3, // 动画总时长，可按需调整
      ease: 'power2.inOut' // 缓动效果，可选linear/power1.in等
    });

    // 组件卸载时清理动画
    return () => timeline.kill();
  }, []);

  return (
    <svg viewBox="0 0 200 100" width="200" height="100">
      <path 
        ref={pathRef} 
        d="M50,50 C75,10 125,90 150,50 C125,10 75,90 50,50 Z" 
        fill="none" 
        stroke="#000" 
        stroke-width="2" 
      />
    </svg>
  );
};

export default InfinityPathAnimation;

方案2：手动控制SVG属性（无需GSAP付费插件） #

通过原生SVG属性实现相同效果，无需依赖GSAP Premium插件：

import React, { useRef, useEffect } from 'react';
import gsap from 'gsap';

const InfinityPathAnimation = () => {
  const pathRef = useRef(null);

  useEffect(() => {
    const path = pathRef.current;
    // 获取路径的总长度
    const pathTotalLength = path.getTotalLength();

    // 初始化：设置dash数组为路径总长，偏移量为总长（完全隐藏路径）
    gsap.set(path, {
      strokeDasharray: pathTotalLength,
      strokeDashoffset: pathTotalLength
    });

    // 动画：将偏移量从总长变为0，实现路径逐步显示
    const timeline = gsap.timeline();
    timeline.to(path, {
      strokeDashoffset: 0,
      duration: 3,
      ease: 'power2.inOut'
    });

    return () => timeline.kill();
  }, []);

  return (
    <svg viewBox="0 0 200 100" width="200" height="100">
      <path 
        ref={pathRef} 
        d="M50,50 C75,10 125,90 150,50 C125,10 75,90 50,50 Z" 
        fill="none" 
        stroke="#000" 
        stroke-width="2" 
      />
    </svg>
  );
};

export default InfinityPathAnimation;

关键注意事项 #

• 必须将SVG路径的fill设为none，否则填充区域会提前显示，破坏逐段绘制的效果。
• 缓动函数ease可根据需求调整，比如linear实现匀速绘制，power1.out实现先快后慢的效果。
• 调整duration参数可控制动画速度，数值越大，路径绘制越缓慢。

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