советов по улучшению производительности анимации CSS и JS
Коди Арсено
Обновлено 30 августа 2018 г.
Пользовательские анимации могут помочь веб-сайту выделиться среди конкурентов, но плохо оптимизированные ресурсы могут привести к проблемам с производительностью, которые в конечном итоге отпугнут пользователей . Если какая-либо из ваших анимаций отображается со скоростью менее 60 кадров в секунду, это заметят ваши посетители, и пользовательский опыт пострадает. В этом руководстве объясняется, как обеспечить бесперебойную работу анимации CSS и JavaScript для всех.
Анимации CSS и анимации JavaScript
Анимации, созданные с помощью JavaScript, иногда называют императивными анимациями, а созданные с помощью CSS — декларативными анимациями. Анимации CSS обрабатываются потоком компоновщика браузера, а не основным потоком, отвечающим за отрисовку и стилизацию. Следовательно, на такие анимации не влияют более ресурсоемкие задачи основного потока.
Конечно, анимации, запускающие события рисования или макета, потребуют работы основного потока, что сводит на нет преимущества использования CSS-анимации.
С другой стороны, JavaScript всегда выполняется основным потоком. Тем не менее, JavaScript дает вам больший контроль над анимацией, поэтому в некоторых ситуациях лучше использовать его. В то время как CSS идеально подходит для простых переходов, JavaScript рекомендуется для анимации с расширенными эффектами , такими как подпрыгивание. Анимации, которые позволяют пользователю приостановить или перемотать назад, также должны быть анимированы с помощью JavaScript. JavaScript необходим для реализации определенных эффектов, таких как прокрутка параллакса. С помощью Web Animations API вы можете создавать сложные анимации для объектно-ориентированных приложений. Вы также можете использовать JavaScript для управления анимацией CSS.
Советы по анимации JavaScript
1. Используйте
requestAnimationFrame() Вместо использования setTimeOut() и setInterval() , используйте собственный метод JavaScript requestAnimationFrame() для наилучшего выполнения кода анимации время для браузера.
Этот метод выбирает подходящую частоту кадров для устройства пользователя, поэтому посетители мобильных устройств увидят другую частоту кадров, чем пользователи настольных компьютеров.
2. Отделить анимацию от событий
Код, отвечающий за обработку таких событий, как прокрутка, должен храниться отдельно от кода анимации. У HTML5Rocks есть отличная статья по этому поводу, в которой более подробно рассматривается, как следует отделять события от кода, обрабатывающего requestAnimationFrame() .
3. Сохраняйте краткость кода JavaScript
Будьте осторожны, добавляя большие фрагменты кода JavaScript на свою веб-страницу. Если ваш код становится громоздким, вы можете попробовать использовать веб-воркеры для выполнения анимации JavaScript в другом потоке.
4. Не используйте jQuery
Держитесь подальше от старых анимационных библиотек, таких как jQuery. Если вы ищете что-то похожее, Velocity.js работает в основном так же, но намного быстрее и поддерживает больше функций.
Замена $.animate() в jQuery на $.velocity() будет иметь большое значение для мобильных пользователей. В Web Designer Depot есть почти исчерпывающий список инструментов анимации для JavaScript.
Выбор свойств CSS для анимации
Непрерывная анимация может потреблять значительное количество ресурсов, но анимация некоторых свойств CSS обходится дороже, чем других. Чем усерднее должен работать браузер, чтобы анимировать свойство, тем медленнее будет частота кадров. Таким образом, выбор правильных свойств CSS для анимации может оказать огромное влияние на производительность страницы.
Существует три основных типа свойств CSS:
- Свойства макета — они определяют размер и размещение элементов страницы. Анимации, которые изменяют ширину и высоту элемента, могут повлиять на размещение других элементов страницы, что может вызвать цепную реакцию, известную как «перетряхивание макета». Поскольку анимации, меняющие макет страницы, особенно затратны, их лучше избегать.
- Свойства рисования — определяют внешний вид элементов страницы. Внесение изменений в такие свойства, как цвет, требует перерисовки, что может быть дорогостоящим. Тем не менее, простые анимации, которые требуют перерисовки небольшой части окна просмотра, могут иметь незначительное влияние на общую производительность. Большие анимации, требующие перерисовки, могут не стоить затраченных усилий.
- Композитные свойства — включая преобразование и непрозрачность — ваши лучшие друзья для создания CSS-анимации с минимальными затратами. С помощью преобразования вы можете масштабировать и поворачивать анимацию, не влияя на макет страницы. По возможности старайтесь использовать составные свойства для анимации. Проявив немного творческого мышления, вы будете удивлены тем, что можно сделать, используя только эти свойства.
Для достижения наилучших результатов постарайтесь ограничиться использованием этих четырех составных свойств:
- положение
- масштаб
- поворот
- непрозрачность
Используя эти четыре параметра, вы можете делать почти все, что вы можете делать с помощью свойств макета, не влияя на позиционирование других элементов страницы.
Например, чтобы изменить размер изображения, используйте scale(), а не width().
Советы по CSS-анимации
1. Избегайте одновременных анимаций
Анимации, которые плавно работают по отдельности, могут не так хорошо работать на странице вместе с десятками других анимаций. Одновременное выполнение более двух анимаций может привести к задержке. Таким образом, рассчитывайте анимацию так, чтобы она не все выполняются одновременно жизненно важно для поддержания стабильной производительности. Этого можно добиться, добавив задержки перехода. Выяснение того, как оптимально поставить вашу анимацию, может потребовать некоторых проб и ошибок, но повышение производительности, которое вы получите, стоит затраченных усилий.
2. Изучите анимацию в замедленном режиме
Если анимация хорошо выглядит в замедленном режиме, она будет также отлично смотреться и на нормальной скорости. Замедление анимации может помочь вам лучше определить проблемы рендеринга.
3. Задержка всех анимаций на долю секунды
Поскольку браузер очень занят, когда ваша страница начинает загружаться, задержка всех анимаций на несколько сотен миллисекунд после начальной загрузки может заметно повлиять на общую производительность страницы.
4. Не привязывайте анимацию CSS к прокрутке
Анимации, которые следуют за областью просмотра при прокрутке пользователем, не только раздражают, но и снижают производительность всего остального на экране.
5. Комбинируйте CSS с SVG
Масштабируемая векторная графика, или SVG, отлично подходит для анимации, поскольку ее можно масштабировать без ухудшения разрешения. Вы можете создавать SVG в таких программах, как Adobe Illustrator, и применять CSS для изменения их внешнего вида. Еще одна причина выбрать SVG, а не иконочные шрифты.
Когда использовать
will-change Если вы перепробовали все остальное, но по-прежнему испытываете проблемы с производительностью, попробуйте добавить will-change свойство вашей анимации.
Как следует из названия, will-change указывает, что свойства элемента будут изменены, чтобы браузер мог сделать соответствующие приготовления. Перечислите конкретные свойства, которые изменятся следующим образом:
.element {
will-change: трансформировать, непрозрачность;
}
Поскольку использование will-change потребляет ресурсы, имейте в виду, что чрезмерное использование может привести к дальнейшим проблемам с производительностью. Ставить его перед каждой анимацией по умолчанию не рекомендуется. Используйте только изменит в крайнем случае для оптимизации производительности страницы.
Проверьте свои анимации
Тестирование производительности должно быть непрерывным процессом при создании анимации для вашего веб-приложения. Чем дольше вы ждете, чтобы выявить проблемы с рендерингом, тем сложнее будет точно определить корень проблемы.
Инструменты разработчика для Chrome, Firefox и Safari предлагают покадровую разбивку событий рисования и рендеринга на вкладках «Сеть».
Эта информация может помочь вам оптимизировать анимацию при ее разработке. Если вы используете Chrome, посмотрите на вкладке «Рендеринг» в консоли DevTools дополнительные функции, такие как счетчик FPS.
Размер экрана пользователя оказывает большое влияние на отображение анимации, поэтому обязательно протестируйте свой проект на нескольких платформах, включая мобильные устройства.
Резюме
Оптимизация анимации для Интернета — относительно простой процесс. Выбор привлекательной анимации, которая побудит новых посетителей остаться на вашем сайте, является более сложной задачей, потому что вы должны учитывать свою аудиторию. В дополнение к отслеживанию того, как технические характеристики вашего сайта влияют на конверсию, обратите внимание на влияние веб-анимации на вашу прибыль. Если ваши анимации не помогают, то они просто тратят ресурсы, которые лучше потратить на что-то другое.
27 лучших плагинов jQuery для анимации — Bashooka
jQuery был создан для анимации.
Будь то постепенное исчезновение предупреждающего сообщения после неудачного входа в систему, скольжение элемента управления меню вниз или даже запуск полноценной игры с боковой прокруткой «стреляй в них» — все это очень просто благодаря некоторым мощным встроенным методам, дополненным обширный набор плагинов. Итак, вот 25 потрясающих плагинов анимации jQuery , которые придадут вашему html-элементу потрясающий визуальный эффект и анимацию.
Анимация
Простой и удобный плагин jQuery для анимированных переходов страниц с помощью CSS .
Typed.js
Это плагин jQuery, который печатает. Введите любую строку и наблюдайте, как она печатается с заданной вами скоростью, возвращайте набранное назад и начинайте новое предложение для любого количества строк, которые вы установили.
Оридоми
Паутина плоская, но теперь ее можно свернуть.
textillate.js
Он объединяет несколько замечательных библиотек, предоставляя простой в использовании плагин для применения анимации CSS3 к любому тексту.
scrollReveal.js
Простой способ создать и поддерживать постепенное появление элементов, срабатывающее при их появлении в окне просмотра. Эксперимент с открытым исходным кодом от JulianLloyd.
Плагин jquery.animate-enhanced
Плагин проанализирует свойства, которые вы анимируете, и выберет наиболее подходящий метод для используемого браузера. Это означает, что ваши переходы слева, сверху и непрозрачности будут преобразованы в переходы CSS3 в агентах Webkit и Mozilla, которые его поддерживают, а также в Opera 10.50+. Если пользователь использует браузер, в котором нет переходов CSS3, этот плагин знает об этом и не будет вмешиваться. Тихая деградация.
Внутри создано несколько механизмов обратного вызова для отслеживания манипуляций с DOM и для получения всех событий CSS3 «transitionend». Это означает, что у вас есть один аккуратный callback() для всей анимации, независимо от того, использует ли плагин CSS3, DOM или и то, и другое для своей анимации.
animo.js
CSS-анимация феноменальна и предлагает многочисленные преимущества по сравнению с анимацией на основе JavaScript. Во-первых, они аппаратно ускорены, что иногда трудно заметить на настольном компьютере, но невероятно заметно при просмотре в мобильном браузере. Во-вторых, я лично считаю, что гораздо проще визуализировать и написать анимацию/переход в CSS, используя ключевые кадры.
Motio
Это небольшая библиотека JavaScript для простой, но мощной анимации и панорамирования на основе спрайтов. Он берет элемент и изменяет положение фона для создания эффекта анимации.
Minima Anima
Анимации Css3 с откатом в старых браузерах. Он создан для быстрого выполнения анимации и имеет API, похожий на jquery animate, с анимацией в очереди. По умолчанию метод анимации выполняет автоматические резервные анимации в браузерах без переходов или transform3d и мгновенные анимации в браузерах без преобразования. Он также масштабирует, поворачивает и наклоняет анимацию в браузерах без переходов благодаря jquery.
transform.js, включенному в плагин.
Turn.js
Это библиотека JavaScript, которая сделает ваш контент похожим на настоящую книгу или журнал, используя все преимущества HTML5. Сеть становится красивой благодаря новым пользовательским интерфейсам, основанным на HTML5; Turn.js лучше всего подходит для журнала, книги или каталога на основе HTML5.
jBlitter
Это плагин jQuery, который позволяет создавать анимированные кнопки для ваших веб-приложений. Наведите указатель мыши на кнопку примера ниже, чтобы понять, что возможно с jBlitter. Пользователи IE7 и 8, ваш браузер не поддерживает холст HTML5, и вы не увидите анимацию.
Lazy Line Painter
Плагин Lazy Line Painter позволяет выполнять анимацию пути. Это означает, что если у вас есть изображение, состоящее только из линий (с началом и концом, без заливки), то этот плагин позволит вам выполнить анимацию, которая будет трассировать линию для рисования изображения — как анимация.
JZoopraxiscope
Это плагин jQuery для создания анимации из статических изображений, вдохновленных Zoopraxiscope Эдварда Мейбриджа.
jQuery Transit
Сверхплавные преобразования и переходы CSS3 для jQuery
Spritely
Это простой плагин с двумя ключевыми методами, sprite() и pan(), которые просто анимируют фон. css-свойство элемента изображения. Разница между ними заключается в том, что «спрайтовое» изображение содержит два или более «кадра» анимации, тогда как «панорамное» изображение содержит непрерывное изображение, которое перемещается влево или вправо, а затем повторяется.
Roundabout
Это подключаемый модуль jQuery, который легко преобразует неупорядоченные списки и другие вложенные HTML-структуры в развлекательные интерактивные области, похожие на вертушки.
Переверни!
Flip — это плагин jQuery, который легко переворачивает ваши элементы в четырех направлениях.
Анимация тени
С помощью этого подключаемого модуля jQuery вы можете расширить функцию анимации для поддержки свойства тени окна CSS. Вы можете анимировать цвет, смещение по осям x и y, радиус размытия и радиус распространения. Марк Карвер внес код для поддержки цветов rgba (альфа-канал).
Circulate
Это подключаемый модуль jQuery, поэтому очевидно, что он использует библиотеку jQuery. В частности, jQuery 1.4 или более поздней версии, поскольку мы используем новую возможность функций .animate() для смягчения свойств. Это означает, что мы можем анимировать «верхнее» значение с помощью одной функции плавности, а «левое» значение — с помощью другой функции плавности.
jQuery Marquee Animation
Marquee Animation — это подключаемый модуль jQuery от Fusiondevs.com для создания потрясающих анимированных выделений с использованием фреймворков jQuery и jQuery.easing.
o’Slider
Плагин o’Slider имеет множество функций обычного слайдера.
Некоторые из них включают автоматическое воспроизведение, остановку при наведении, отображение/скрытие навигации, список маркеров или миниатюры для навигации, подписи и встроенный контент. Но основная причина создания плагина заключалась в том, чтобы дать пользователям веб-сайтов потрясающий опыт работы в фоновом режиме.
TextFX
TextFX — это инструмент текстовой анимации jQuery для анимации одной строки текста. Он создан для простоты использования, но также хорошо подходит для более продвинутых программистов благодаря гибкому сценарию.
Обратный отсчет jQuery
Плагин обратного отсчета jQuery, который не отстой!
hoverFlow
Еще одно решение для создания очереди анимации в jQuery.
Superscrollorama
Плагин jQuery для суперкрутой анимации прокрутки.
jRumble
jRumble — это плагин jQuery, который вибрирует, трясет и вращает любой выбранный вами элемент. Это здорово использовать в качестве эффекта наведения или способа привлечь внимание к элементу.