Узнайте, как смягчить и придать вес вашей анимации.
Ничто в природе не движется линейно из одной точки в другую. В действительности, события имеют тенденцию ускоряться или замедляться по мере своего движения. Наш мозг устроен так, чтобы ожидать такого рода движений, поэтому при анимации вам следует использовать это в своих интересах. Естественное движение позволяет пользователям чувствовать себя более комфортно в ваших приложениях, что, в свою очередь, приводит к улучшению общего опыта.
Краткое содержание
- Ослабление делает анимацию более естественной.
- Выбирайте плавную анимацию для элементов пользовательского интерфейса.
- Избегайте анимации замедления и замедления, если только вы не можете сделать их короткими; конечным пользователям они кажутся вялыми.
В классической анимации движение, которое начинается медленно и ускоряется, называется «замедление», а движение, которое начинается быстро и замедляется, — «замедление». Терминология, наиболее часто используемая в Интернете, — «легкость входа» и «легкость выхода» соответственно. Иногда эти два действия комбинируются, что называется «легкостью выхода». Таким образом, ослабление — это на самом деле процесс придания анимации менее резкости или выраженности.
Упрощение ключевых слов
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;