나는 당신의 '변환'속성에 전환을 적용하여 화면 전체 요소의 부드러운 애니메이션을 달성하기 위해 GPU 가속을 강제 수 있다는 사실을 알고 예 :CSS : 전환 : 왼쪽/위쪽 GPU 가속?
elem.style.transition = 'all 3s ease-out';
elem.style.transform = 'translateX(600px)';
하지만 난 당신이 대체하는 경우 무슨 일이 일어날 지 궁금 해서요 와 두 번째 줄 :
elem.style.left = '600px';
는 /은 "왼쪽"(또는 "최고") 속성에서 GPU 가속 킥, 또는 transform 속성에 있어야 않습니다 수겠습니까
? GPU 가속화가 가능해야한다고 생각하지만 읽은 모든 문서에서 최종 답변을 수집 할 수는 없습니다.가속화되지 않았습니다. 가속화하려면 특정 CSS3 속성을 사용해야합니다. 나는 당신이 흥미로운 이러한 링크를 찾을 수 있습니다 생각 : 귀하의 질문에 대답하고의 기회를 가지려면
http://www.html5rocks.com/en/tutorials/speed/html5/
http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
Does animating the value of a CSS3 transform with javascript rule out hardware acceleration?
내가 모은 합의 사항은 translate3d 속성 만 모바일 사파리와 같은 모바일 장치에서 하드웨어 가속을 사용한다는 것입니다.
예, 제가이 질문을 게시하게 한 바로 그 페이지였습니다. 그것은 전환/변환을 사용하는 CSS3 전환 기반 접근 방식으로 몇 밀리 초마다 왼쪽/위를 변경하는 타이머 기반 접근 방식과 대조되지만 불행히도 왼쪽/위 조합과 '전환'조합은 제외됩니다. –
, 당신은 특정로 범위를 좁힐해야 할 것 특정 그래픽 서브 시스템이있는 특정 OS의 특정 브라우저 버전. 이 모든 것들은 대답에 영향을 미칠 수 있습니다. 왜냐하면 이것은 사양에 나와있는 것이 아니기 때문에 특정 OS/하드웨어의 특정 브라우저를 구현 한 사람에게 달려 있습니다. 일부 브라우저는 일부 CSS 지시문을 가속화하기 위해 GPU를 사용하지만 일부 상황에서는 다른 브라우저가 아닌 GPU를 사용한다는 증거가 있습니다.하지만 위의 경우에 대해서만 이야기 할 수도 있습니다. – jfriend00
글쎄, 나는 그것에 대해 확실하지 않다 ... 나는 특정 OS/GPU/브라우저/등등에 대한 대답을 찾고 있지 않다. 나는 많은 다른 OS/GPUs/브라우저로서 일반화 된 대답을 찾고있다./etc가 내 사이트에 액세스하고있을 수 있습니다. "모든 OS/브라우저/기타가 다르게 처리하므로 의존하지 않아도됩니다."라고 대답하면 만족스러운 대답이됩니다. 어쨌든 누군가 다른 시각에서 이미 반응 한 것 같습니다. –
일부 유형의 하드웨어에서 작동 할 때 일부 또는 모든 브라우저 버전에 대한 귀하의 질문에 대한 답변이 확인되었습니다. 아마 그게 당신이 찾고 있었던 것이지만, 당신의 질문은 그것보다 훨씬 더 일반적인 것이 었습니다. 그래서 저는 특정 하드웨어에 대한 특정 구현의 맥락에서 대답해야한다고 말한 것입니다. 왼쪽 속성을 javascript로 설정하고 CSS 전환을 트리거하면 하드웨어 가속을 사용할 수 없거나 사용하지 않을 것이라는 점은 전혀 없습니다. 그러므로 어떤 상황에서도 모든 브라우저가 현재 작동하는지 여부는 문제입니다. – jfriend00