Comment faire des animations en continu pour les éléments avec

Question

J'ai de la durée d'animation plus courte [le GASP] l'animation GASP suivante:

$(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

Maintenant, ce que je voulais passer dans l'animation ci-dessus est que les polygones les plus externes devraient tourner (ils sont trouvés au total). Tous les 4 doivent tourner à des vitesses différentes et doivent tourner en continu sans s'arrêter.

A partir de maintenant mon code d'animation se présente comme suit:

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); 

Comme vous pouvez le voir la durée sont différentes: 10,5,70,65. Maintenant, la plus longue animation ne s'arrête pas, mais les animations les plus courtes s'arrêtent et recommencent à un moment donné. Comment puis-je arrêter cela? c'est-à-dire, comment faire les animations de sorte que la rotation pour tous les cercles soit continue sans s'arrêter?

Answer 1

Pour obtenir l'effet visuel de continuité, sélectionnez ease: Power0.easeNone,. Il fait juste tourner les engrenages. En ce qui concerne les vitesses différentes, vous devez configurer 4 animations TweenMax différentes. Un pour chaque équipement. Et chacun devrait avoir le paramètre de 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); 

}); 

Voici un exemple de travail: https://jsfiddle.net/gvczqhpo/4/

Pourquoi 4 différents TweenMax « s?

La chronologie est un, bien, chronologie. Imaginez que c'est un line qui a un point de départ et un point final. Il commande des éléments pour fonctionner d'une certaine manière à un certain moment. Ce que vous voulez accomplir n'est pas une série d'événements, mais une animation infinie. Je dirais donc que l'utilisation d'une chronologie est superflue ici. Juste aller avec 4 animations différentes;)

Answer 2

Le problème est que GSAP ne redémarrera la boucle que si toutes les animations dans un objet TimelineMax ont cessé. Ainsi, vous aurez besoin d'un objet TimelineMax par engin:

$(() => { 
    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); 
}); 

Aussi, assurez-vous d'utiliser Linear.easeNone si vous voulez que la vitesse de l'animation pour rester constante.

Vous pouvez consulter une démo here.