如何在重复 gsap 时将新的随机数设置为 x, y

Question

你好，我使用 vue3 和 gsap 每当 gsap 重复时，我想给出新的 x 和 y。 Repeatdelay 随机效果很好，但没有刷新，x 和 y 总是被赋予相同的值。

这是我的代码。

    gsap.set(array.value[i], {
      xPercent: gsap.utils.random(0, 900),
      yPercent: gsap.utils.random(0, 300)
    })
    gsap.to(array.value[i], {
      opacity: 0,
      scale: 2,
      duration: 0.3,
      yoyo: true,
      onComplete () {
        gsap.delayedCall(gsap.utils.random(2, 5, 0.1), () => this.restart())
      }
    })

我想在重复 gsap 时设置新的 x 和 y 随机值。有什么好的方法吗？

如果您没有足够的解释，请告诉我。

感谢您的帮助。

Answer 1

您可以在动画重新开始之前为 x 和 y 设置一个新的随机值。

const setRandomPosition = item => {
    gsap.set(item, {
        xPercent: gsap.utils.random(0, 900),
        yPercent: gsap.utils.random(0, 300)
    })
}

setRandomPosition(array.value[i]);
gsap.to(array.value[i], {
    opacity: 0,
    scale: 2,
    duration: 0.3,
    yoyo: true,
    onComplete(){
        gsap.delayedCall(gsap.utils.random(2, 5, 0.1), () => {
            setRandomPosition(array.value[i]);
            this.restart()
        })
    }
})

如何在重复 gsap 时将新的随机数设置为 x, y

How to set on a new random to x, y when gsap is repeated

gsap