requestAnimationFrame을 언제 사용합니까?

Question

잠시 전에 requestAnimationFrame을 발견 한 후, 나는 그것에 대해 알 수있는 모든 정보로 뛰어 들었습니다. 그것에 대해 기본 설명 -

• http://creativejs.com/resources/requestanimationframe/는 : 나는 경우에서 온 자원의 몇 가지 이름을 다른 사람들이 그것에 대해 더 많은 정보를 찾고있다.
• http://www.html5rocks.com/en/tutorials/speed/animations/ - 사용법이 설명되어 있습니다.

어쨌든, 이러한 모든 자원은 나에게 어떻게 requestAnimationFrame 작품이나 방법이/사용해야 수에 대해 뭔가를 얘기하지만, 그것을 사용하는 권리 때 그들 중 누구도 말해 없습니다.

• (애니메이션의 경우 CSS 애니메이션과 마찬가지로 반복적으로 요소의 스타일을 변경해야합니까?)
• 자동 이벤트가 하나 또는 여러 요소의 CSS/클래스를 변경하려고 할 때 사용해야합니까?
• 자동 이벤트가 하나 이상의 요소의 텍스트 값을 변경하려고 할 때 사용해야합니까? (예 : 1 초마다 한 번씩 시계 값을 업데이트)
• 자동 이벤트로 DOM을 수정해야 할 때 사용해야합니까?
• 자동화 된 이벤트에 .offsetTop, .offsetLeft와 같은 값이 필요하고 몇 줄 더 위쪽이나 왼쪽과 같은 스타일을 변경하려고 할 때 사용해야합니까?
• 사용자가 생성 한 이벤트로 인해 위의 변경 사항이 발생하는 경우 사용해야합니까?

TL; DR :이 때 오른쪽 requestAnimationFrame를 사용하는?

Answer 1

아직 안됩니다. 적어도, 적어도. 이는 아직 실험적이며 전체 권장 사항에 도달했거나 그렇지 않을 수도 있습니다 (it is still a working draft at this point). 즉, 오래된 브라우저에 대해 신경 쓰지 않는다면, 또는 willing to work with the polyfill available을 사용하는 것이 가장 좋습니다. 브라우저에서 다시 칠하기 (대부분의 애니메이션)가 필요한 화면을 그릴 때입니다.

DOM을 간단하게 수정하는 경우이 방법은 과도합니다. 이는 항목을 빠르게 그리거나 이동시킬 때 애니메이션을 수행 할 때 브라우저의 다시 그리기가 원활하게 진행될 수 있도록해야 할 때만 유용합니다. 그것은 당신이 계산하는 모든 프레임이 화면에 그려지도록 보장 할 것입니다. 또한 애니메이션에보다 정확한 시간 측정을위한 유틸리티를 제공합니다. 첫 번째 인수는 페인트가 발생할 시간이므로, 그 순간에 있어야 할 곳을 확인할 수 있습니다.

DOM에 많은 수정을가하거나 부드럽게 전환 할 필요가없는 경우에는 사용하지 마십시오. 이것은 사용자의 컴퓨터에서 더 비쌉니다. 따라서 이것을 전환, 움직임 및 애니메이션에서보다 매끄럽게 만드는 것으로 제한하려고합니다. 페이지를 변경할 때마다 프레임 다시 그리기를 강제로 수행 할 필요가 없습니다. 응답은 그리기 사이에 여분의 몇 밀리 초를 걱정할 필요가 없을 정도로 충분히 빠르기 때문입니다.

Answer 2

이전 답변에서 말한 것처럼 부드럽게 전환 할 필요가 없으므로 불연속 애니메이션에서 사용해서는 안됩니다. 대부분의 경우 시간에 따라 지속적으로 변화하는 속성에 사용됩니다.