Record_jquery를 학습하는 jQuery의 애니메이션 기능

저는 오랫동안 jQuery animate 구현에 관심이 많았지만 얼마 전까지 너무 바빠서 며칠 전 Dragon Boat Festival 연휴 전까지 공부할 시간이 없었습니다.

jQuery.animate의 각 애니메이션 전환 효과는 여유 기능을 통해 구현됩니다. jQuery1.4.2에는 두 가지 기능이 사전 설정되어 있습니다.

easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}

firstNum이 초기값이라는 것은 매개변수 이름에서 막연하게 유추할 수 있습니다. 수학을 잘하면 선형함수가 직선방정식이라는 것을 알 수 있고, 물리학을 잘하면 등속운동의 변위방정식이라는 것을 알 수 있습니다(저는 수학과 물리학을 잘 모르지만, 다른 사람이 나에게 생각나게 했어………). 그러면 diff와 p는 속도와 시간입니다.

jQuery.animate의 프로토타입을 다시 살펴보세요.

애니메이션: 함수( prop, speed, easing, callback )

각 매개변수에 대한 설명은 다음과 같습니다.

prop: 스타일 속성과 해당 값을 애니메이션 속성과 최종 값으로 포함하는 집합입니다.
속도: 애니메이션 지속 시간.
easing: 사용할 삭제 효과의 이름입니다.
콜백: 애니메이션이 완료되면 실행되는 함수입니다.

요소의 현재 스타일 값(firstNum)을 얻을 수 있으며, 애니메이션 지속 시간(p)은 지속 시간, 최종 스타일 값은 prop입니다. 이론적으로 애니메이션 속도(diff)를 계산할 수 있습니다. 그러나 이를 위해서는 계산을 수행하기 위한 또 다른 기능이 반드시 필요합니다. 이것은 분명히 현명하지 못한 일입니다. 여유 함수를 호출하기 위한 관련 코드를 살펴보겠습니다(jQuery.fx.prototype.step에 있음).

var t = now();
...
var n = t - this.startTime;
this.state = n / this.options.duration;
...
this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);

p 매개변수의 값이 this.state의 값이기도 함을 알 수 있는데, 이는 실제로 애니메이션의 시간 진행 상황임을 알 수 있습니다. firstNum과 diff의 매개변수 값은 각각 0과 1로 하드코딩되어 있습니다. 이제 여유 함수의 비밀이 완전히 드러났습니다. p, firstNum 및 diff는 모두 실제 값이 아닌 백분율입니다. diff 값은 1입니다. 이는 애니메이션이 1배속으로 실행된다는 의미입니다. 변위 진행률을 계산한 후 "초기값(최종값 - 초기값) × 진행률"로 현재 변위값을 계산할 수 있습니다.

this.now = this.start ((this.end - this.start) * this.pos);

setInterval을 사용하여 현재 시간과 초기 시간의 차이가 애니메이션 지속 시간보다 클 때까지 특정 시간(jQuery에서는 13ms)마다 변위 작업을 수행합니다.

기존 아이디어에 따르면 애니메이션은 다음과 같이 구현됩니다. setInterval을 사용하여 특정 값이 한계 값에 도달할 때까지 특정 시간에 특정 값만큼 증가합니다. 이것의 주요 문제는 서로 다른 브라우저가 서로 다른 속도로 실행되어 애니메이션 속도에 차이가 있다는 것입니다. 일반적으로 IE는 느리고 Firefox는 더 빠릅니다. jQuery.animate는 현재 시간을 기준으로 변위 값을 결정하므로 특정 순간의 변위 값은 항상 고정되므로 애니메이션 속도에는 차이가 없습니다.