React+GSAP实现雪花动画异常问题求助

我通过父组件生成多个Snowflake子组件，每个雪花组件都有独立ref，并在useEffect钩子中调用animateSnowflake函数执行动画。动画函数内包含动态参数，但所有雪花的起始Y值与GSAP.to的目标Y值均一致（未动画时雪花在页面同一Y位置）。但GSAP动画表现异常：部分雪花起始Y符合预期，部分仅播放一半动画，部分起始Y错误。请问这一异常的原因是什么？

父组件代码 #

export default function Snow() {
    let l = 50;
    let arr = new Array(l);
    for( let i = 0; i < l; i++){
        i%2 === 0 ? arr[i] = 0 : arr[i] = 1
    }

 const animateSnowflake = (el)=>{
        let h = window.innerHeight;
        let w = window.innerWidth;
        let delay = gsap.utils.random(1, 5, 1);
        let duration = gsap.utils.random(3, 8, 1);
        let startX = gsap.utils.random(0, w, 1);
        let startY = -200;
        let y = h;
        let x = gsap.utils.random(startX-5, startX+5, 1)
        let s = gsap.utils.random(0.5, 1, 0.1)

        let tl = gsap.timeline();
        tl.set(el, {
            y: startY,
            x: startX,
            scale: 1
        })
        console.log(y)
        tl.to(el, {
            y: y+200,
            scale: s*3,
            duration: duration,
            delay: delay,
            ease: 'none',
            repeat: -1

        })
    }

   return (
        <div className = 'Snow'>

            {arr.map(el=>{
                if(el === 1) return <Snowflake1 animateSnowflake = {animateSnowflake}/>;
                return <Snowflake2  animateSnowflake = {animateSnowflake}/>
            })}

        </div>
    )
}

子组件代码（Snowflake1与Snowflake2仅SVG内容不同） #

export default function Snowflake2({animateSnowflake}) {
    const ref = useRef(null);

    useEffect(() => {
        animateSnowflake(ref.current)
    }, []);
    return (
        <div ref = {ref}>
            <svg 
            </svg>
        </div>

    )
}

异常原因及解决方法 #

1. 时间线延迟设置错误 #

你在gsap.timeline()的to方法中添加了delay参数，但GSAP时间线中，delay属性会作用于整个时间线的后续动画，而非当前这个tween。当大量雪花的时间线同时初始化时，延迟会打乱动画的执行顺序，部分雪花的初始set操作可能被意外延迟，或者动画起始状态被后续tween覆盖，导致显示异常。

修正方法：将delay移到时间线的初始化配置中，确保延迟作用于整个时间线的起始：

let tl = gsap.timeline({ delay: delay }); // 把delay放在timeline初始化时
tl.set(el, {
    y: startY,
    x: startX,
    scale: 1
})
tl.to(el, {
    y: y+200,
    scale: s*3,
    duration: duration,
    ease: 'none',
    repeat: -1
})

2. 缺少唯一key导致React渲染异常 #

父组件中使用arr.map渲染子组件时，没有为每个子组件设置唯一的key属性。React依赖key来识别不同的组件实例，没有key会导致React在重渲染时复用DOM元素，进而出现ref指向错误、GSAP操作错误DOM的情况，引发动画异常。

修正方法：给每个子组件添加唯一key（推荐使用唯一标识，这里用index作为临时方案）：

{arr.map((el, index)=>{
    if(el === 1) return <Snowflake1 key={index} animateSnowflake={animateSnowflake}/>;
    return <Snowflake2 key={index} animateSnowflake={animateSnowflake}/>
})}

3. DOM挂载时机与动画初始化的冲突 #

子组件的useEffect仅在挂载时执行一次，但存在DOM元素还未完全挂载完成就调用animateSnowflake的可能，此时ref.current可能为null或未完全渲染，GSAP无法正确设置初始状态，导致动画表现异常。

修正方法：在调用动画前先判断ref是否有效：

useEffect(() => {
    if (ref.current) {
        animateSnowflake(ref.current)
    }
}, []);

4. 父组件函数引用的稳定性问题 #

父组件的animateSnowflake函数会在每次父组件渲染时重新创建，虽然子组件的useEffect依赖为空数组不会重复执行，但如果父组件发生重渲染，子组件持有的可能是旧的函数引用。可以通过useCallback优化函数引用的稳定性：

const animateSnowflake = useCallback((el)=>{
    // 原函数内容
}, []);

内容的提问来源于stack exchange，提问作者Paweł Czekaj