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

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

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

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

Answer 2

您不需要使用时间轴。只要您使用的是TweenMax，就可以做到。

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

如果您希望补间反弹或前进，您可以

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

Javascript ifinite循环（Greensock）

2 个答案: