<rmcreative>

RSS

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

20 февраля 2015

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

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

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

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

Комментарии RSS

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.