comment faire circuler des animations jquery chaînées entre elles?

Question

Consultez ce site:

http://photoshop.tutorialcraft.com/

Avis soleil vers le haut puis vers la droite. Voici mon code:

var windowWidth = $(window).width(); 

var width50 = (windowWidth*0.50)-220; //220 is half the width of the BG image being animated. 
var width100 = (windowWidth*1); 


$("#sunnmooncycle").css("backgroundPosition", "-440px 100px");.delay(2000) 

      .animate({'backgroundPosition':'('+ width50+'px '+'-400px' + ')'}, {duration:1500}) 
      .animate({'backgroundPosition':'('+ width100+'px '+'100px' + ')'}, {duration:1500}); 

Ce serait bien si cela pouvait aller dans un motif plus arqué, plutôt que deux animations droites. Si je crée 2 "keyframes" entre les deux, dans la position où un arc serait, apparait agité, puisque Jquery facilite les animations, au lieu de simplement passer de l'une à l'autre. Je ne suis pas assez bon avec les maths pour comprendre comment je ferais cela, mais puisque la largeur de la fenêtre est calculée juste avant l'exécution, je suis sûr que quelqu'un peut savoir comment faire cela.

Alors, comment puis-je obtenir ceci pour animer dans un arc au lieu de point à point?

Answer 1

Jetez un oeil aux documents pour animate de jQuery. Vous pouvez simplement spécifier l'assouplissement à désactiver en utilisant la valeur linear comme troisième argument de l'appel.

Vous pouvez configurer autant d'images clés que vous le souhaitez.