Javascript无限循环（Greensock）

Question

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

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

现在，如果你想叠加，你可以使用位置参数来创建更好看的动画：qazxsw poi

您还可以使用交错方法创建具有相同属性的重叠动画：https://greensock.com/position-parameter

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

Answer 2

您不需要使用时间轴。只要您使用TweenMax就可以。

https://codepen.io/GreenSock/pen/exGbj?editors=0010

如果你想让补间反复前进，你可以做到

TweenMax.to(mc, 1, {x:100, repeat:-1});