Question

我正在尝试使用GSAP在React（打字稿）中创建动画文本。

Text变量是一个字符串，它分成多个字符串数组，形式是为每个字母创建单独的div。为了使用GSAP制作动画，每个元素都需要有自己的ref-目前，只有最后一个字母起作用，因为只分配了一个ref。

如何为每个元素创建单独的ref并将其传递给gsap？看到某个地方应该传递回调作为参考，但是我不确定该怎么做。

Answer 1

我已经找到一种解决方法，但是如果有人知道这样做的方法，它还是会更喜欢useRef钩子...

const TextAnimator: FC<TextAnimatorTypes> = ({ text }) => {
    const letterArray = text.split('');
    const letterElements = [];
    const elementIds: string[] = [];
    for (let i = 0; i < letterArray.length; i++) {
        letterElements.push(<div className={styles.letter}
                                 id={letterArray[i] + i}>{letterArray[i] === ' ' ? '\xa0' : letterArray[i]}</div>);
        elementIds.push(letterArray[i] + i);
    }

    const random = (min: number, max: number) => {
        return (Math.random() * (max - min)) + min;
    };

    useEffect(() => {
        for (let i = 0; i < elementIds.length; i++) {
            const element = document.getElementById(elementIds[i]);
            gsap.from(element, {
                duration: 2.5,
                opacity: 0,
                x: random(-500, 500),
                y: random(-500, 500),
                z: random(-500, 500),
                scale: .1,
                delay: i * .02,
                yoyo: true,
                repeat: -1,
                repeatDelay: 10,
                ease: Power1.easeOut
            });
        }
    }, [elementIds]);

    return (
        <div className={styles.box}>
            <p className={styles.animatedText}>
                {letterElements}
            </p>
        </div>
    );
};

如何在React和useRef钩子中使用数组获取多个引用？

1 个答案: