javascript - 如何为动画持续时间较短的元素制作连续动画[GASP]

Question

我有以下 GASP 动画:

$(function () {
    var tmax_options = {
      repeat: -1
    };

    var tmax_tl = new TimelineMax(tmax_options),
      tween_options_to = {
        css: {
          rotation: 360,
          transformOrigin: 'center center'
        },
        ease: Cubic.Linear,
        force3D: true
    };

// Last Argument is Position Timing.
// Use this argument to stagger the visibility of surrounding circles
tmax_tl.to($('svg > path'), 10, tween_options_to, 0)
  .to($('svg > #XMLID_26_'), 5, tween_options_to, 0)
  .to($('svg > #XMLID_23_'), 70, tween_options_to, 0)
  .to($('svg > #XMLID_20_'), 65, tween_options_to, 0);
});

FIDDLE HERE

现在我想在上面的动画中发生的是最外层的多边形应该旋转(它们总共找到)。所有 4 个都应该以不同的速度旋转，并且应该不停地连续旋转。

到目前为止，我的动画代码如下所示:

tmax_tl.to($('svg > path'), 10, tween_options_to, 0)
    .to($('svg > #XMLID_26_'), 5, tween_options_to, 0)
    .to($('svg > #XMLID_23_'), 70, tween_options_to, 0)
    .to($('svg > #XMLID_20_'), 65, tween_options_to, 0);

如您所见，持续时间不同:10,5,70,65。现在最长的动画不会停止，但较短的动画会停止，然后在某个时间点再次开始。我怎样才能阻止这个？即，如何制作动画，使所有圆圈的旋转都是连续的而不停止？

Answer 1

问题在于，如果 TimelineMax 对象中的所有动画都已停止，GSAP 只会重新开始循环。因此，每个齿轮需要一个 TimelineMax 对象:

$(() => {
    const tweenOptions = {
        css: {
            rotation: 360,
            transformOrigin: "center center"
        },
        ease: Linear.easeNone,
        force3D: true
    };
    const timelines = [];
    for (let i = 0; i < 4; ++i) {
        timelines.push(new TimelineMax({
            repeat: -1
        }));
    }
    timelines[0].to($("svg > path"), 10, tweenOptions, 0);
    timelines[1].to($("svg > #XMLID_26_"), 5, tweenOptions, 0)
    timelines[2].to($("svg > #XMLID_23_"), 70, tweenOptions, 0)
    timelines[3].to($("svg > #XMLID_20_"), 65, tweenOptions, 0);
});

此外，如果您希望动画速度保持恒定，请确保使用 Linear.easeNone。

您可以查看演示 here .