CSS переходы, анимации имеют ужасную производительность, поведение

Question

Я работаю над анимацией переворачивания страницы . Производительность разочаровывает. Особенно, если вы возьмете класс pages и сделаете его размером около 800 пикселей (вставьте $('.pages').css({width: '960px', height: '600px'}); в консоль). Раньше у меня работало около 16 переходов одновременно, и я сократил его до 9, многие из которых являются трансформациями! Я не знаю, что еще я могу сделать.

Похоже, что Chrome не использует графический процессор. При начальном перелистывании страницы происходит скачок FPS, но через равные промежутки времени он падает (включается с помощью about:flags):

Попробуйте в Safari, и вы получите лучшую производительность, но увидите, что анимации не синхронизируются, часто отстают друг от друга, и есть странное колебание, от которого проект Романа Кортеса также пострадал от в тот же браузер (я еще не работал в Fx).

В Интернете не было много хороших материалов о том, как оптимизировать CSS-переходы и анимацию, и я в основном учил сам. Я надеялся, что кто-то получит такой совет.

Answer 1

Чтобы воспользоваться преимуществами графического процессора, вы должны использовать translate3d(x,y,z) вместо translate(x,y) в своих -webkit-tranform. Это заставит Chrome использовать графический процессор для рендеринга анимации.

Имейте в виду, что хотя производительность компьютера при наличии хорошей видеокарты значительно возрастет, она также ухудшится на более медленном оборудовании.

Answer 2

Вот перелистывание страницы, которое я сделал для нашего запуска Sencha Animator. Он также вдохновлен оригиналом Рамона Кортеса, но использует разные механизмы - насколько я помню. В Safari и на iOS это очень плавно, но на настольных компьютерах Chrome это выглядит довольно резко. Пока еще не проверял это в Android 4.

Answer 3

Анимация box-shadows и -webkit-градиентов очень дорога, попробуйте временно удалить их, чтобы посмотреть, не улучшит ли это производительность. Если это так, посмотрите, что вы можете сделать, чтобы заменить их изображениями.

Answer 4

Я использую Chrome 17 на OSX, и, кажется, все нормально - работает со скоростью 20-30 кадров в секунду, никаких проблем с окунанием или графикой. Я подозреваю, что это просто проблема со старыми сборками Chrome.