在 REACT 和 GSAP 中制作下雪动画

Question

我有父组件生成x“雪花”组件。每个雪花都有自己的 ref 属性，在 useEffect 挂钩中调用“animatesnowflake”。动画函数本身具有一些动态值，但是每个雪花的起始 Y 和 gsap.to y 值都是相同的（当不将雪花动画设置在网页上的相同 Y 位置时）。不知道为什么，但 gsap 没有正确设置动画，因为有些 y 值按预期开始，有些正在播放动画的一半，有些从错误的 Y 点开始，有人知道为什么 gsap 在这里“疯狂”吗？下面是父组件的代码：

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

这是 1 个雪花的代码（1 和 2 之间唯一的区别是 svg ）：

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

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

    )
}

Answer 1

我已经弄清楚出了什么问题。如果有人遇到同样的问题，我会解释一下。我的组件中有 SVG 代码（包括 svg 中的“转换”），这会导致代码行为异常。使用SVG作为div的背景解决了这个问题:)因此1个技巧，在使用gsap时避免在css / html styles / svgs中进行转换，在“gsap.set”或其他中使用转换:)