<rmcreative>

RSS

Все заметки с тегами «Velocity, animation»

Можно уточнить:

    (1)
  1. Плавная анимация в браузере

    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. Заменяйте на реальный контент как только анимация закончена.
    Комментировать