如何为动画持续时间较短的元素制作连续动画[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);
});

骗子在这里

现在我想在上面的动画中发生的是最外面的多边形应该旋转(总共找到它们).所有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如果您希望动画的速度保持不变,请务必使用.

你可以在这里查看一个演示.

Answer 2

要获得连续的视觉效果，请选择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 种不同的动画即可；）