Выберите подходящее замедление для вашего проекта, будь то замедление, замедление или и то, и другое. Возможно, даже для большего удовольствия используйте подпрыгивания!
Обсудив различные варианты замедления анимации, какой тип анимации следует использовать в своих проектах и какую продолжительность она должна иметь?
Краткое содержание
- Используйте плавную анимацию для элементов пользовательского интерфейса; Легкость Quintic — это очень приятная, хотя и быстрая, легкость.
- Обязательно используйте продолжительность анимации; замедление и плавное замедление должны составлять 200–500 мс, тогда как отскоки и эластичные замедления должны иметь более длительную длительность — 800–1200 мс.
Вообще говоря, послабление будет правильным решением и, безусловно, хорошим вариантом по умолчанию. Он запускается быстро, что придает вашей анимации ощущение отзывчивости, что желательно, но с приятным замедлением в конце.
Существует группа хорошо известных уравнений ослабления, помимо тех, которые указаны с помощью ключевого слова ease-out в CSS, которые различаются по своей «агрессивности». Для быстрого эффекта ослабления рассмотрите плавность Quintic .
Посмотрите анимацию облегчения Quintic.
Другие уравнения замедления, особенно отскоки или упругие замедления, следует использовать с осторожностью и только тогда, когда это соответствует вашему проекту. Есть несколько вещей, которые отвлекают пользователя от опыта, например резкая анимация. Если ваш проект не предназначен для развлечения, не допускайте, чтобы элементы прыгали по пользовательскому интерфейсу. И наоборот, если вы создаете сайт, который должен быть беззаботным, то обязательно используйте отказы!
Поиграйте с упрощениями, посмотрите, какие из них соответствуют индивидуальности вашего проекта, и двигайтесь дальше. Полный список типов замедления, а также демонстрационные версии см. на сайте easings.net .
Выберите правильную продолжительность анимации
Важно, чтобы любая анимация, добавленная в ваш проект, имела правильную продолжительность. Слишком короткая анимация будет выглядеть агрессивной и резкой; слишком долго, и это будет мешать и раздражать.
- Ослабление: около 200–500 мс . Это дает глазу возможность видеть анимацию, но не мешает.
- Легкость: около 200–500 мс . Имейте в виду, что в конце произойдет тряска, и никакие изменения времени не смягчат это воздействие.
- Эффекты отскока или упругости: около 800–1200 мс . Вам нужно дать время, чтобы эффект упругости или отскока «успокоился». Без этого дополнительного времени упругая подпрыгивающая часть анимации будет агрессивной и неприятной для глаз.
Конечно, это всего лишь рекомендации. Поэкспериментируйте с собственными удобствами и выберите то, что подходит для ваших проектов.