Анимация

Анимация занимает особое место среди средств создания привлекательных веб-приложений и сайтов. Современные пользователи привыкли к быстро реагирующим интерфейсам с высокой степенью интерактивности. Однако анимация не обязательно должна быть реализована прямо в интерфейсе. Какие элементы следует анимировать, когда и какое ощущение должна вызывать анимация?

TL;DR

  • Используйте анимацию в качестве средства придания динамичности своим проектам.
  • Анимация должна способствовать улучшению взаимодействия с пользователем.
  • Взвешенно подходите к выбору свойств, для которых создаете анимационные эффекты; на изменение некоторых из них требуется довольно много ресурсов!

Выбирайте элементы, которые целесообразно анимировать

Отличная анимация делает ваши проекты приятными и привлекательными для пользователей. Анимировать можно практически все, что угодно: ширину, высоту, положение, цвет, фон. Однако при этом не следует забывать о возможных проблемах с производительностью, а также о том, как именно анимация скажется на индивидуальности вашего приложения. Подвисание или плохо подобранный эффект анимации могут вызвать отрицательную реакцию пользователей, поэтому анимация должна хорошо работать и быть уместной.

Используйте анимацию для поддержки взаимодействия

Не следует применять анимацию только потому, что вы можете это сделать. Она будет просто раздражать пользователей и мешать им. Размещайте анимацию стратегически, чтобы поддержать взаимодействие с пользователем. Если пользователь нажимает значок меню, выводите меню с боку страницы, или же если он нажимает кнопку, используйте небольшой отблеск или отскок, чтобы подтвердить взаимодействие. Старайтесь избегать использования техники анимации, которая без нужды прерывает работу пользователей или мешает им.

Не стоит анимировать ресурсоемкие свойства

Хуже неправильно размещенной анимации бывает только анимация, которая вызывает подвисание страниц. Пользователям это чрезвычайно не по душе. Они, скорее всего, подумают, что лучше бы вы вообще обошлись без анимации!

На изменение одних свойств требуется больше ресурсов, чем других, и при этом вероятность подвисания страниц выше. Так, например, для изменения свойства элемента box-shadow потребуется выполнить намного более ресурсоемкую операцию перерисовки страницы, чем изменение, скажем, цвета текста. Изменение свойства элемента width вероятнее всего будет более ресурсоемким, чем изменение его свойства transform.

Подробности о вопросах производительности анимации можно найти в руководстве Анимация и производительность, но если вам требуется TL;DR, старайтесь изменять свойства transform и opacity, а также пользуйтесь свойством will-change. Если вы хотите точно знать, что происходит при анимации того или иного свойства, сведения об этом см. в разделе Срабатывание событий при изменении CSS.