Как сделать непрерывную анимацию для элементов с более короткой продолжительностью анимации [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

Чтобы получить визуальный эффект непрерывности, выберите 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"S?

Временная шкала - это, ну, временная шкала. Представь, что это 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 если вы хотите, чтобы скорость анимации оставалась постоянной.

Вы можете проверить демо здесь.