자바 스크립트 setInterval 함수를 사용하여 애니메이션 효과를 얻으려면 : 예상보다 느림

자바 스크립트 setInterval을 사용하여 애니메이션 효과를 회전 시키려면 1.5 초, 1.5 초는 360도 회전하는 애니메이션을 유지하고 싶습니다. 1 밀리 초에서 증가를 계산하고 millisecond.Here 당에서는 setInterval 함수를 사용하여 내 코드입니다 : 애니메이션이 성공적으로 실행할 수자바 스크립트 setInterval 함수를 사용하여 애니메이션 효과를 얻으려면 : 예상보다 느림

var duration= 1500;//The animation duration time 
var rotate = 360;//The rotate need to be rotate 
var degPerSec = rotate/parseFloat(duration); //the increment per millisecond 
var degree = 0;//the begin degree 
console.time('rotate'); 
var timer = setInterval(function() { 
    degree = degree + degPerSec; 
    $('#test')[0].style.MozTransform = 'rotate(' + degree + 'deg)'; 
    $('#test')[0].style.WebkitTransform = 'rotate(' + degree + 'deg)'; 

    if (degree >= rotate) { //if reach 360 degree , clear the interval 
     clearInterval(timer); 
     console.timeEnd('rotate');// caculate the duration 
    } 
    }, 1) 
})

하지만 내가 전체를 계산하는 console.time를 사용할 때뿐만 아니라 1.5S 마지막 보인다 지속 시간은 약 6 초입니다! 1.5 시가 아닙니다. 왜 이런 일이 일어 났습니까?이 문제를 어떻게 해결할 수 있습니까? : 여기

는 demo

업데이트입니다 나는 CSS3를 사용하지 않는 이유 : 회전 정도가 외부 패스 양식을 필요로 매개 변수로 사촌, 이미

출처

2012-06-20 hh54188

JavaScript에서는 타이머 간격이 보장되지 않으며 '1ms'은 거의 불가능합니다. [이 기사] (http : // ejohn.org/blog/how-javascript-timers-work /)를 참조하십시오. – bfavaretto

왜 간단한 스타일 시트를 사용할 수있을 때이 용도로 Jquery를 사용하고 있습니까? 이미 Mozilla- & 웹킷 특정 분기 코드를 사용하고 있습니다. CSS3로 처리하고 끝내십시오. 훨씬 빠릅니다 (JS가 아닌 네이티브 C 코드 사용) 훨씬 간단합니다.

#test{ 
    width:30px; 
    height:30px; 
    background:red; 
    position:absolute; 
    left:20px; 
    top:20px; 
    -webkit-transition: all 1.5s ease; 
    -moz-transition: all 1.5s ease; 
    -o-transition: all 1.5s ease; 
    transition: all 1.5s ease; 
}

편집 : 당신이 회전의 정도에 대한 변수 매개 변수를 사용해야하는 경우,이 여전히 JS 사용하여 매우 할-수 : CSS의 사용에 관한

var degrees = 360; 
var incrementer = 1; 
setInterval(function() { 
    var deg = "rotate(" + (degrees * incrementer) + "deg)"; 
    var obj = document.getElementById("test"); 
    if (typeof(obj.style.transform) !== "undefined") { 
    obj.style.transform = deg; 
    } else if (typeof(obj.style.MozTransform) !== "undefined") { 
    obj.style.MozTransform= deg; 
    } else if (typeof(obj.style.WebkitTransform) !== "undefined") { 
    obj.style.WebkitTransform = deg; 
    } 
    incrementer = incrementer + 1; 
}, 1500);

출처

2012-06-20 15:15:51

cuz 회전 각도는 외부에서 전달되어야합니다. – hh54188

편집 된 두 번째 단락 코드는 작동하지 않습니다. – hh54188

정말요? 그래서 [이 링크] (http://jsfiddle.net/XDUrQ/34/)가 작동하지 않습니까? 그것은 내 시스템에서 잘 작동하기 때문입니다. –

그 때문에 정의되지 dom을 변경하면 re-flow가 발생하고 re-flow가 전체보기를 업데이트합니다 (시간이 걸립니다). 이 업데이트를 덜 자주 사용하거나 CSS3 애니메이션/전환을 사용하십시오.

출처

2012-06-20 15:09:15 Luka

스케줄러 시간 조각이 약 10ms이므로 특정 OS (예 : Windows)에서는 1ms 간격이 의미가 없습니다. 또한, 귀하의 기능은 총 1ms 이상 걸릴 수 있습니다. 이 두 가지는 당신의 경기 침체에 동의합니다.

안전면에서 함수 호출 간의 실제 지연을 측정 할 수 있습니다.

출처

2012-06-20 15:09:23

이렇게하는 이유가 있습니까? 변환의 지속 기간을 정의하는 데 단지 transition을 사용하지 않는 것이 어떻습니까?

... 
-webkit-transform: rotate(360deg); 
-webkit-transition:-webkit-transform 1s ease-in-out; 
...

출처

2012-06-20 15:11:02 hvgotcodes

cuz 회전 각도는 외부에서 전달되어야합니다. – hh54188

위의 모든 의견은 확실히 해당 . 1 밀리 초마다 많은 코드를 실행하는 것은 그만한 가치가 있습니다. 인간의 눈에 애니메이션을 부드럽게 표시하려면 초당 ~ 30 프레임 만 있으면되고 여기서 1000 프레임/초를 돌고 있습니다. 프레임을 조금 더 넓히고 ~ 33ms마다 애니메이션을 실행하면 애니메이션이 더 빨리 진행되어 훨씬 부드럽게 보입니다.

마지막으로 requestAnimationFrame이라는 브라우저에 내장 된 최상의 프레임 속도를 결정하고 실행 루프를 실행하는 도구가 있습니다. 이 콜백을 전달하면 가장 효율적인 프레임 속도 (가능한 경우 일반적으로 60)를 결정하고 가능한 가장 효율적인 방법으로 애니메이션을 실행하여 다시 칠하는 것과 관련된 오버 헤드를 최소화합니다.

이 예에서는 setInterval을 requestAnimationFrame으로 바꾸고 회전 값을 약간 조정하면됩니다.

출처

2012-06-20 15:23:00

자바 스크립트 setInterval 함수를 사용하여 애니메이션 효과를 얻으려면 : 예상보다 느림

답변

관련 문제