Как сделать цепочку анимации jquery между друг другом?

Question

Заканчивать этот сайт:

http://photoshop.tutorialcraft.com/

Обратите внимание, что солнце на вершине, а затем вправо. Вот мой код:

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

Было бы неплохо, если бы он мог перейти в более узорчатый узор, а не две прямые анимации. Если я создаю 2 «ключевых кадра» между ними, то в позиции, где была бы арка, появляется прерывисто, поскольку JQuery облегчает анимацию, а не просто течет от одного к другому.

Я не достаточно хорош с математикой, чтобы выяснить, как бы я это сделал, но так как ширина окна вычисляется непосредственно перед исполнением, я уверен, что кто-то может знать, как это сделать.

Так как я могу получить это для анимации в арке вместо точки-точки?

Answer 1

Взгляните на документы для jQuery's animate. Вы можете просто указать, что ослабление будет отключено, используя значение linear в качестве третьего аргумента для вызова.

Вы можете настроить столько ключевых кадров, сколько хотите.