Основы смягчения

Узнайте, как смягчить и придать вес вашей анимации.

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

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

В классической анимации движение, которое начинается медленно и ускоряется, называется «замедление», а движение, которое начинается быстро и замедляется, — «замедление». Терминология, наиболее часто используемая в Интернете, — «легкость входа» и «легкость выхода» соответственно. Иногда эти два действия комбинируются, что называется «легкостью выхода». Таким образом, ослабление — это на самом деле процесс придания анимации менее резкости или выраженности.

Упрощение ключевых слов

CSS-переходы и анимации позволяют вам выбрать тип замедления, который вы хотите использовать для своей анимации . Вы можете использовать ключевые слова, которые влияют на замедление (или timing , как его иногда называют) рассматриваемой анимации. Вы также можете полностью настроить easing , что дает вам гораздо больше свободы для выражения индивидуальности вашего приложения.

Вот некоторые ключевые слова, которые вы можете использовать в CSS:

  • linear
  • ease-in
  • ease-out
  • ease-in-out

Источник: CSS-переходы, W3C.

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

Линейная анимация

Кривая анимации линейной легкости.

Анимации без какого-либо замедления называются линейными . График линейного перехода выглядит так:

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

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

Посмотреть линейную анимацию

Чтобы добиться описанного выше эффекта с помощью CSS, код будет выглядеть примерно так:

transition: transform 500ms linear;

Упрощающая анимация

Кривая замедленной анимации.

При замедлении анимация запускается быстрее, чем линейная, а в конце также происходит замедление.

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

Посмотрите анимацию облегчения

Есть много способов добиться эффекта легкости, но самым простым является ключевое слово ease-out в CSS:

transition: transform 500ms ease-out;

Упрощенная анимация

Упрощенная кривая анимации.

Анимации замедления начинаются медленно и быстро заканчиваются, что является противоположностью анимации замедления.

Этот вид анимации похож на падение тяжелого камня: он начинается медленно и быстро падает на землю с оглушительным стуком.

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

Посмотрите анимацию легкости

Чтобы использовать анимацию замедления, аналогично анимациям замедления и линейной анимации, вы можете использовать ее ключевое слово:

transition: transform 500ms ease-in;

Упрощающая анимация

Кривая плавной анимации.

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

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

Посмотрите анимацию легкого выхода

Чтобы получить анимацию easy-in-out, вы можете использовать ключевое слово CSS ease-in-out :

transition: transform 500ms ease-in-out;