0

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

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

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

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

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

4

1 回答 1

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

于 2019-11-29T14:12:27.157 回答