jQuery가 requestAnimationFrame을 사용하지 않는 이유는 무엇입니까?

jQuery가 requestAnimationFrame을 사용하지 않는 이유는 무엇입니까?

---

일부 브라우저는을 지원하는데 requestAnimationFrame왜 사용하지 않습니까? 결국 Google Chrome 10 이후 로 지원 되었습니다 . 그럼에도 불구하고 jQuery 는 그것을 사용하지 않는 것 같습니다 . 버그 보고서를 찾았 지만 실제 설명이 제공되지 않았습니까? 그래도 jQuery 사람들에게는 이유가 있다고 확신합니다.

왜이 멋진 API를 사용하지 않을까요?

---

에서 티켓 # 9381 가 사용을 중단 왜 읽을 수 requestionAnimationFrame시간 후.

요약하면 문제는 창에 포커스가 없을 때 애니메이션이 실행되지 않는다는 것입니다 (브라우저가 CPU 부하를 줄이려고 시도 함). 창이 숨겨져 있으면 괜찮지 만 표시되지 않고 포커스를 벗어난 것입니다. 게다가 애니메이션 대기열이 쌓이고 창이 다시 초점을 맞췄을 때 상황이 엉망이되었습니다. 이를 위해서는 코드의 추악한 변경 및 / 또는 사람들이 애니메이션 대기열에 항목을 추가하는 방법을 변경해야합니다. 따라서 더 나은 방법이있을 때까지 지원을 제거하기로 결정했습니다.

---

여기에 다른 답변과 반대 의견이 주어지면 간단한 슬라이드 쇼 애니메이션에서 이것을 테스트하고 싶었습니다.

http://brass9.com/nature

2013 년부터 여기에있는 다른 답변에 대한 이의는 더 이상 중요하지 않은 것으로 보입니다. 나는 추가했다

https://github.com/gnarf/jquery-requestAnimationFrame/blob/master/src/jquery.requestAnimationFrame.js

내 기존 애니메이션 코드에 추가하고 사용중인 페이드 애니메이션이 켜지고 영향을 미치는지 확인했습니다. 백그라운드 창, Chrome 30, IE 11 및 FF 24에서도 안정적으로 작동합니다. Android 2.3을 테스트 한 결과 폴리 필을 사용하고 예상대로 작동하는 것으로 보입니다.

jQuery 3

jQuery 3.0은 requestAnimationFrame을 통합 합니다. 기본적으로 jQuery는 잘 처리 할 수 ​​있지만 일부 사용자는을 호출 .setInterval(function() { tag.animate(하여 망칠 수 있습니다. 따라서 메이저 버전 릴리스에 대한 펀트. jQuery 3은 IE8 이하를 지원하지 않으며 지원하지 않을 것이므로 IE8 사용자가있는 경우 jQuery 1.x를 사용하십시오.

CSS 전환

내 테스트에서의 CPU / 배터리 절약 주장 requestAnimationFrame은 잘못된 약속입니다. 예를 들어 긴 페이드와 같이 CPU 사용량이 높습니다. CPU / 배터리를 절약하는 것은 CSS Transitions 입니다. 왜냐하면 브라우저, 특히 모바일 브라우저가 의도 한 것과 다른 요청에 대해 훨씬 더 강력한 가정을하고 네이티브 코드가 여전히 Javascript + DOM보다 빠르기 때문입니다.

따라서 CPU / 배터리를 정말로 절약하고 싶다면 CSS 전환이 적합합니다. IE9 이하에서는이를 처리 할 수 ​​없으며 여전히 많은 사용자가 있으므로 페이지 하단에있는 jquery.transit 및 대체 방법을 고려 animate하십시오.

---

v1.6.2의 jQuery 소스에서 requestAnimationFrame존재하는 경우 사용되는 것을 볼 수 있습니다. 나는 그것이 사용될 수있는 모든 것에 사용되고 있다는 것을 알기 위해 코드를 자세히 연구하지는 않았지만,를 호출하는 대신 코드의 애니메이션 섹션에서 사용되고있다 setInterval(). 다음은 1.6.2의 코드입니다.

// Start an animation from one number to another
custom: function( from, to, unit ) {
    var self = this,
        fx = jQuery.fx,
        raf;

    this.startTime = fxNow || createFxNow();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
    this.now = this.start;
    this.pos = this.state = 0;

    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !timerId ) {
        // Use requestAnimationFrame instead of setInterval if available
        if ( requestAnimationFrame ) {
            timerId = true;
            raf = function() {
                // When timerId gets set to null at any point, this stops
                if ( timerId ) {
                    requestAnimationFrame( raf );
                    fx.tick();
                }
            };
            requestAnimationFrame( raf );
        } else {
            timerId = setInterval( fx.tick, fx.interval );
        }
    }
},

나는 아직 1.6.4를 사용하지 않아서 그 버전에 대해 모른다. 해당 버전이 아니라면 몇 가지 문제가 있었을 것이므로 제거되었습니다.

편집하다:

이 블로그 게시물 을 읽으면 1.6.3에서 뽑아 낸 것처럼 들리며 아마도 1.7에서 다시 되돌릴 것입니다. 뽑힌 주된 이유는 사람들이 애니메이션 대기열을 사용하여 "잘못"된 일부를 ( 아마도 그것은 의견의 문제 일 것입니다).

참고URL : https://stackoverflow.com/questions/7999680/why-doesnt-jquery-use-requestanimationframe