이러한 애니메이션 기능 요구 사항이 있다고 가정하십시오. DIV의 너비를 100px에서 200px로 변경하십시오. 작성된 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<div id = "test1"> </div>
기능 animate1 (요소, endValue, 기간) {
var starttime = new Date (),
startValue = parseint (element.style.width),
단계 = 1;
var timerid = setInterval (function () {
var nextValue = parseint (element.style.width) + 단계;
emeter.style.width = nextValue + 'px';
if (nextValue> = endValue) {
ClearInterval (타이머);
// 애니메이션을 표시하는 데 시간이 많이 걸립니다
요소 .innerhtml = 새 날짜 - 시작 시간;
}
}, duration / (endValue -startValue) * step);
}
animate1 (document.getElementById ( 'test1'), 200, 1000);
원칙은 200px까지 특정 시간마다 1px를 늘리는 것입니다. 그러나 애니메이션이 끝난 후 디스플레이 시간은 1 초 (보통 1.5 초) 이상입니다. 그 이유는 SetInterval이 실행 간격을 엄격하게 보장 할 수 없기 때문입니다.
더 좋은 방법이 있습니까? 먼저 초등학교 수학 문제를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
건물 A와 Building B는 100 미터 떨어져있었습니다. 한 남자가 A에서 A에서 B를 건물로 일정한 속도로 걸었습니다. 5 분 동안 걸은 후, 그는 목적지에 도착했다. 그는 3 분 안에 얼마나 멀리 A를 짓지 않았습니까?
일정한 속도 동안 특정 시간의 거리를 계산하기위한 계산 공식은 다음과 같습니다. 거리 * 현재 시간/시간. 따라서 대답은 100 * 3 / 5 = 60이어야합니다.
이 질문의 영감은 특정 순간의 여정이 특정 공식을 통해 계산 될 수 있다는 것입니다. 마찬가지로, 애니메이션 프로세스 중 특정 모멘트의 값은 축적되지 않고 공식을 통해 계산할 수 있습니다.
코드 사본은 다음과 같습니다.
<div id = "test2"> </div>
함수 animate2 (요소, 엔드 값, 지속 시간) {
var starttime = new Date (),
startValue = parseint (element.style.width);
var timerid = setInterval (function () {
var 백분율 = (새 날짜 - 시작 시간) / 지속 시간;
var stepValue = startValue + (endValue -StartValue) * 백분율;
emeter.style.width = stepValue + 'PX';
if (백분율> = 1) {
ClearInterval (타이머);
요소 .innerhtml = 새 날짜 - 시작 시간;
}
}, 13);
}
animate2 (document.getElementById ( 'test2'), 200, 1000);
이 개선 후에는 애니메이션 실행 시간이 최대 10ms 만 소요되는 것을 알 수 있습니다. 그러나 문제는 완전히 해결되지 않았습니다. 브라우저 개발 도구에서 Test2 요소를 확인하면 Test2의 최종 너비가 200px 이상일 수 있습니다. Animate2 함수의 코드를주의 깊게 확인하면 다음을 찾을 수 있습니다.
1. 백분율 값은 1보다 클 수 있으며, 이는 Math.min에 의한 최대 값을 제한하여 해결할 수 있습니다.
2. 백분율 값이 1 세 이하인 것으로 보장 되더라도, 최종 값 또는 startValue가 소수 인 한, (endValue -startValue)의 값은 JavaScript 소수점 작동이 충분히 정확하지 않기 때문에 오류를 유발할 수 있습니다. 실제로, 우리가 보장해야 할 것은 최종 값의 정확성이므로 백분율이 1 인 경우 endValue를 직접 사용하십시오.
따라서 Animate2 함수의 코드는 다음으로 수정됩니다.
코드 사본은 다음과 같습니다.
함수 animate2 (요소, 엔드 값, 지속 시간) {
var starttime = new Date (),
startValue = parseint (element.style.width);
var timerid = setInterval (function () {
// 백분율이 1보다 크지 않은지 확인
var 백분율 = math.min (1, (새 날짜 - 시작 시간) / 지속 시간);
var stepvalue;
if (백분율> = 1) {
// 최종 값의 정확도를 확인하십시오
stepValue = endValue;
} 또 다른 {
stepValue = startValue + (endValue -StartValue) * 백분율;
}
emeter.style.width = stepValue + 'PX';
if (백분율> = 1) {
ClearInterval (타이머);
요소 .innerhtml = 새 날짜 - 시작 시간;
}
}, 13);
}
마지막 질문이 있습니다. SetInterval의 간격이 왜 13ms로 설정됩니까? 그 이유는 현재 모니터의 새로 고침 속도가 일반적으로 75Hz를 초과하지 않기 때문입니다 (즉, 초당 75 회 새로 고침이 필요합니다.