CSS 전환, 애니메이션 성능이 매우 좋음

I'm working on a page turn animation. 성능이 실망 스럽습니다. 특히 pages 클래스를 가져 와서 800px와 같은 크기로 만들면 (콘솔에 $('.pages').css({width: '960px', height: '600px'}); 붙여 넣기). 한 번에 16 개의 전환을 실행하고 9로 줄였습니다. 그 중 많은 전환이 변환되었습니다. 내가 뭘 할 수 있는지 모르겠다.CSS 전환, 애니메이션 성능이 매우 좋음

크롬에서 GPU를 사용하지 않는 것 같습니다.

Chrome showing FPS dips

Safari에서 그것을 밖으로 시도하고 당신이 더 나은 성능을 얻을 수 있지만, 애니메이션이 동기화되지 않습니다 것을 볼 수 있습니다 : 그것은 초기 페이지 차례의 FPS 스파이크하지만 (about:flags 이것을 가능) 일정한 간격으로 아래로 딥 종종 서로 뒤떨어 지기도하고, 같은 브라우저에서 Román Cortés's project also suffered from이라는 이상한 wobblyness가 있습니다 (아직 Fx에서는 작동하지 않습니다).

웹에서 CSS 전환 및 애니메이션을 최적화하는 방법에 대한 좋은 자료는별로 없었으며 대부분 스스로를 가르쳐 왔습니다. 나는 누군가가 이런 종류의 충고를하기를 희망했다.

출처

2011-12-13 Caleb Hearon

여기 Sencha Animator 출시를위한 a page flip I did입니다. 그것은 또한 라몬 코르테스 (Ramon Cortes)의 원작에서 영감을 얻었지만 다른 메커니즘을 사용합니다. Safari 및 iOS에서는 매우 부드럽지만 Chrome 데스크톱에서는 약간의 저속함이 있습니다. 아직 Android 4에서 확인하지 않았습니다.

출처

2011-12-13 19:23:21

니스, 사파리가 더 좋아 보이는 것처럼이 기술을 연구해야 할 것입니다. 그러나 Mac의 Chrome은 픽셀을 임의의 덩어리로 렌더링하여 검정색으로 변하게하거나 아래의 레이어를 무작위로 나타냅니다. –

예, 분명히 Chrome 15 (?)의 웹킷 버전에는 변형이 추가 될 때 암시 적 z- 주문이 엉망이되는 버그가 있습니다. 명시적인 Z- 인덱스 설정을 사용하여 버전을 처리하고 문제가 수정되는지 확인하겠습니다. –

'-webkit-transform-style : preserve-3d'를 추가하면 방금 깜박이지 않습니다. 나는 아직도 그것이 안되는 곳에서 약간의 클리핑을 얻는다. –

GPU를 이용하려면 translate(x,y) 대신 translate3d(x,y,z)을 사용해야합니다. -webkit-tranform. 이렇게하면 Chrome이 GPU를 사용하여 애니메이션을 렌더링합니다.

컴퓨터에 좋은 비디오 카드가 있으면 성능이 크게 향상되지만 느린 하드웨어에서는 성능이 저하됩니다.

출처

2011-12-13 21:46:49

감사합니다. Chrome/MacOS에서 translate3d를 시도했지만 DOM 구조가 다소 복잡한 12 페이지가있을 때 horrendously 속도가 느려졌습니다. 전체 페이지가 크롤링하기 전에 느려지기도했습니다. 그래서 불행하게도 다른 플랫폼을 가속화하면서 한 플랫폼을 손상시키지 않는 방법을 찾아 낼 수는 없습니다. –

저는 OSX에서 Chrome 17을 사용하고 있습니다. 약 20-30fps, 디핑 또는 그래픽 문제없이 실행됩니다. 이 문제는 구형 Chrome 빌드의 문제 일뿐입니다.

출처

2011-12-13 22:08:06

최신 베타 버전은 성능면에서 엄청난 이점을 제공합니다. 감사. –

애니메이션 상자 그림자 및 -webkit-gradients는 매우 비쌉니다. 임시로 제거하여 성능이 향상되는지 확인하십시오. 그렇다면 이미지로 대체하기 위해 수행 할 수있는 작업을 확인하십시오.

출처

2011-12-14 17:36:00 Duopixel

CSS 전환, 애니메이션 성능이 매우 좋음

답변

관련 문제