체인 된 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 개의 직선 애니메이션이 아닌 더 많은 아치형 패턴이 있다면 좋을 것입니다. 그 사이에 2 개의 "키 프레임"을 만들면, 아치가있는 위치에서 고르지 않게 보입니다. Jquery는 애니메이션을 단순화하기 때문에 애니메이션을 간단하게 만듭니다.

나는 이것을 어떻게 할 것인지 계산할만큼 수학적으로는 좋지 않지만, 실행 직전에 윈도우의 너비가 계산되기 때문에 누군가가 이것을 수행하는 방법을 알고있을 것입니다.

이렇게 어떻게하면 점대 점 대신 아치에서 애니메이션을 만들 수 있습니까?

Answer 1

jQuery의 animate에 대한 문서를 살펴보십시오. 호출의 세 번째 인수로 linear 값을 사용하여 여유를 갖도록 여유를 지정할 수 있습니다.

이렇게 원하는만큼 많은 키 프레임을 설정할 수 있습니다.