Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Правильный выбор изменения скорости

Теперь, когда мы рассказали о различных способах, с помощью которых можно изменять скорость анимации, какие из них следует использовать в своих проектах, а также какая продолжительность должна быть у анимации?

TL;DR

  • Используйте анимацию с замедлением для элементов пользовательского интерфейса; замедление в Quintic является довольно приятным, хотя и коротким.
  • Не забывайте про продолжительность анимации; замедление и ускорение должны занимать 200–500 мс, тогда как отскоки и эластичное изменение скорости должны иметь более длительную продолжительность 800–1200 мс.

В целом правильным является использование замедления, это хороший вариант по умолчанию. Анимация идет быстро в начале, что придает ей ощущение динамичности, а это хорошо, при этом к концу ее ход плавно замедляется.

Есть группа хорошо известных формул замедления, помимо указанной в ключевом слове ease-out в CSS, которые отличаются своей "агрессивностью". Для реализации сверхбыстрого эффекта замедления рассмотрите возможность использования замедления Quintic.

Кривая анимации с замедлением Quintic

См. анимацию с замедлением Quintic.

Другие формулы изменения скорости, особенно отскоки или эластичное изменение скорости, следует использовать реже, только когда они годятся для вашего проекта. Мало что так портит впечатление пользователей, как анимация, которая не работает плавно. Если ваш проект не является развлекательным, не следует заставлять элементы пользовательского интерфейса прыгать в разные стороны! И наоборот, если вы делаете сайт, который должен быть легким и забавным, тогда пусть все прыгает и скачет!

Экспериментируйте с динамикой, найдите те варианты изменения скорости анимации, которые соответствуют индивидуальности вашего проекта, и используйте их в качестве отправной точки. Полный список типов изменения скорости (с демонстрацией) приведен на сайте easings.net.

Правильный выбор продолжительности анимации

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

  • Замедление: приблизительно 200–500 мс. При этом глаз может увидеть анимацию, но она не будет мешать.
  • Ускорение: приблизительно 200–500 мс. Помните, что в конце анимация ускорится, и никакое изменение значений времени не сможет смягчить это ощущение.
  • Отскоки или эластичные эффекты: приблизительно 800–1200 мс. Отскоку или эластичному эффекту требуется время, чтобы остановиться. Без этого дополнительного времени эластичная часть анимации будет очень агрессивной и неприятной на вид.

Разумеется, это лишь общие указания. Экспериментируйте с собственными вариантами изменения скорости и выберите то, что лучше всего подойдет для ваших проектов.