如何选取某个class的随机元素| GreenSock-GSAP

Question

我只想使用 GreenSock (GSAP) 对 SVG 图像中某个 class 的某些元素进行动画处理。

要为 的所有 元素设置动画 class，我会这样做：

gsap.to(".class", {duration: 5, rotate: 180, transformOrigin: 'center center', repeat: -1});

现在，我如何选择一个（或多个）随机元素并像这样为它们设置动画。

我想做的是让它们无限期地随机动画。

Answer 1

如果你真的需要创建单独的补间，你必须有一个包含所有元素的列表（数组），跟踪你已经开始制作动画的元素，并依次触发新的补间他们。像这样：

// Get your elements in array form
const elems = gsap.utils.toArray(".class");

// Shuffle the array
const shuffled = (elems) => elems.sort(() => Math.random() - 0.5);

// Then fire of a new tween for each one, removing it from the array
while (shuffled.length > 0) {
  let elem = shuffled.pop();
  gsap.to(elem, {...}); // optionally keep track of the count to offset it or whatever
}

但是，GSAP 可以使用交错器为您做这种事情！如何操作取决于您的需要。既然你还没有说清楚，这里有一个关于如何做这类事情的一般想法：

gsap.to(".class", {
  duration: 5, 
  rotate: 180, 
  transformOrigin: 'center center', 
  stagger: { 
    each: 0.1, // or even a negative value if you want them to all be started initially
    repeat: -1 
  }
});

顺便说一句，通过在 GreenSock's official forums.

中发帖，您更有可能获得更快的回复和对您的请求的其他意见

如何选取某个class的随机元素| GreenSock-GSAP

How to pick random element of a certain class | GreenSock - GSAP

svg

gsap

svg-animationelements