RMCreative.ru - Блог Голосов: 1 Адрес блога: http://rmcreative.ru/feed/ Добавлен: 2008-06-12 21:34:00 блограйдером ZaiSL

Плавная анимация в браузере

Добиться плавной анимации при наличии тучи DOM-элементов, да ещё и когда в анимируемом контейнере грузятся картинки и какой-нибудь Google Maps, оказалось не просто. Путь был довольно долг и тернист. Приведу только рецепт:

1. Не используйте jQuery.animate(). Он тормоз.
2. Вместо него используйте Velocity.js.
3. Если возможно, анимируйте только transform: translate, transform: scale, transform: rotate, opacity.
4. Включайте аппаратное ускорение для анимируемого слоя. Делайте это сразу в CSS, приправьте чёрной магией.

Если и после этого не помогло:

1. Попробуйте уменьшить количество DOM-элементов в анимируемом контейнере.
2. Не стартуйте несколько анимаций единовременно.
3. Если контент в контейнер подгружается динамически, рисуйте во время анимации эмуляцию контента, как это делает, например, Facebook. Заменяйте на реальный контент как только анимация закончена.