Javascript无限循环(Greensock)

Question

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

Answer 1

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

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

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

最后值得注意的是，交错方法将为所有元素设置相同的属性动画，而使用带有位置参数的时间轴类允许您为每个对象创建不同的动画。