requestAnimation CSS 전환을 시작하기위한 프레임

Question

CSS 전환을 시작하기위한 애니메이션 프레임을 요청하는 것이 맞습니까?

CSS :

#foo{ 
    border-radius:50px; 
    width:50px; 
    height:50px; 
    background:#c00; 
    position:absolute; 
    top:0; 
    left:0; 
    -moz-transition: all 1s; 
    -webkit-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 

자바 스크립트 : 어떤 의미를 다음과 같이

var f = document.getElementById('foo'); 
document.addEventListener('click', function(ev){ 
    f.style.left = (ev.clientX-25)+'px'; 
    f.style.top = (ev.clientY-25)+'px'; 
},false);  

이 예제를 다시 작성합니까 예를 들어

의 Mozilla CSS transitions page이 jsfiddle example에 대한 링크를 포함? 어떤 답변을

var rAF = window.mozRequestAnimationFrame || 
      window.webkitRequestAnimationFrame; 
var f = document.getElementById('foo'); 
document.addEventListener('click', function(ev){ 
    rAF(function() { 
     f.style.left = (ev.clientX-25)+'px'; 
     f.style.top = (ev.clientY-25)+'px'; 
    }); 
},false); 

감사 :

자바 스크립트 (this jsfiddle 참조).

Answer 1

나는 오래된 질문을 알고 있지만 이것은 누군가에게 유용 할 수 있습니다.

rAF (requestAnimationFrame)은이 예제에서는 쓸모가 없습니다. 왜냐하면 당신은 CSS 전환과 요소를 슬라이딩하고 rAF를 한 번 호출하기 때문입니다. 최적의 CPU, 브라우저 별 GPU 성능을 위해 프레임 단위로 rAF를 호출하여 소품 변경 사항을 루프 처리해야합니다. 영국 공군에 대한

주요 아이디어 :

당신이 CSS 애니메이션없이 DOM 요소를 애니메이션을 적용 할, 당신은 요소의 스타일 속성 을 변경해야 주기적으로를 (폭, 높이, 상단처럼 등 왼쪽).

rAF가 없으면 setTimeout, setInterval 함수를 사용하여 시간에 따라 소품을 변경해야합니다. 그러나 브라우저는 이러한 프로세스를 최적화하지 않으며 CPU, GPU 성능에 고통을 줄 수 있습니다.

rAF를 사용하면 최신 브라우저가 CPU, GPU 사용량을 줄여서 애니메이션 성능을 최적화 할 수 있습니다.

유용한 링크 :

requestAnimationFrame for Smart Animating

requestAnimationFrame

Answer 2

아니오 그렇지 않습니다. 최신 브라우저에서는 모든 애니메이션, CSS 전환, CSS 애니메이션, SMIL, element.animate가 동일한 내부 엔진에 의해 제어됩니다. 브라우저는 다음 사용 가능한 프레임에서 애니메이션을 시작합니다. RAF와 기본 애니메이션의 스레드가 다릅니다. RAF는 JavaScript 애니메이션 용입니다. 재 작성은 변경 사항을 설정할 때까지 몇 밀리 초 정도 기다릴뿐입니다. 그 후 애니메이션은 내부 엔진에 의해 제어됩니다.