如何使较短的动画时长的[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

要获得连续性的视觉效果，请选择ease: Power0.easeNone,。它只是旋转齿轮。

至于有不同的速度，你应该设置4个不同的TweenMax动画。每个齿轮一个。并且每个应具有参数repeat:-1。

$(function() { 
    var 
    tween_options_to = { 
     css: { 
     rotation: 360, 
     transformOrigin: 'center center' 
     }, 
     ease: Power0.easeNone, 
     force3D: true, 
     repeat:-1 
    }; 

TweenMax.to($('svg path'), 2, tween_options_to, 0); 
TweenMax.to($('svg > #XMLID_26_'), 10, tween_options_to, 0); 
TweenMax.to($('svg > #XMLID_23_'), 7, tween_options_to, 0); 
TweenMax.to($('svg > #XMLID_20_'), 4, tween_options_to, 0); 

}); 

这里有一个工作示例：https://jsfiddle.net/gvczqhpo/4/

为什么 4种不同的TweenMax的？

时间轴是一个时间轴。想象一下，这是一个有着起点和终点的line。它命令元素在特定时间点以某种方式工作。

你想要完成的不是一系列的事件，而是一个无限的动画。所以我会争辩说，在这里使用时间表是多余的。只是去与4个不同的动画;）

Answer 2

问题是，GSAP将只会重新启动循环，如果一个TimelineMax对象的所有动画已停止。因此，你需要每一个齿轮对象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。