javascript - Javascript无限循环(Greensock)

我想知道如何在GreenSock JavaScript库中制作无限动画。我知道JavaScript一次只能执行1个操作，但我希望某些SVG图像不停地移动。对我来说，这看起来像是无限循环，但我知道我在错误的地方思考。我想知道这种事情是如何运作的，但是我找不到很好的资源。

最佳答案

Greensock动画平台具有两个允许无限循环的类：TweenMax和TimelineMax。

如果您希望所有元素同时在无尽循环中进行动画处理，则可以使用TweenMax并将元素作为数组传递：

const myObjects = [...];
const t = TweenMax.to(myObjects, 1, {rotation:360, ease:Linear.easeNone, repeat:-1});
// this creates a seamless rotation of all the objects at the same time

现在，如果要创建更复杂的序列，则应使用TimelineMax：

const tl = new TimelineMax({repeat:-1});
// then add the instances to the timeline
tl
  .to(object1, 1, {rotation:360, ease:Linear.easeNone})
  .to(object2, 1, {x:200});
  // and so on

现在，如果您想重叠，可以使用position参数来创建更好看的动画：https://greensock.com/position-parameter

您也可以使用stagger方法创建具有相同属性的重叠动画：https://codepen.io/GreenSock/pen/exGbj?editors=0010

最后值得一提的是，使用时间轴类和position参数允许您为每个对象创建不同的动画时，stagger方法将为所有元素设置相同的属性动画。