如何选择某个类的随机元素 |绿袜 - GSAP答案

【问题标题】：How to pick random element of a certain class | GreenSock - GSAP如何选择某个类的随机元素 |绿袜 - GSAP
【发布时间】：2019-11-28 23:48:04
【问题描述】：

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

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

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

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

我想要做的是轮流无限期地随机为它们设置动画。

【问题讨论】：

标签： svg gsap svg-animationelements

【解决方案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 可以使用 staggers 为您做这种事情！你如何做到这一点取决于你的需要。既然你还没有说清楚，这里有一个关于如何做这类事情的大致思路：

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 发帖，您更有可能获得更快的响应和对此类请求的更多意见。

【讨论】：