The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Основы изменения скорости

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

TL;DR

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

В классической анимации движение, скорость которого в начале низкая, а затем увеличивается, называется "slow in" (смягчение в начале движения), а то, скорость которого в начале высокая, а затем уменьшается ― "slow out" (смягчение в конце движения). В Интернете же эти варианты движения называются "ease in" (ускорение) и "ease out" (замедление). Иногда используется сочетание двух этих вариантов, называемое "ease in out" (ускорение в начале – замедление в конце). Отсюда понятно, что изменение скорости ― это, по сути, процесс, направленный на то, чтобы сделать анимацию не столь резкой, смягчить ее.

Ключевые слова изменения скорости

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

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

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

Источник: CSS Transitions, W3C

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

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

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

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

См. пример линейной анимации.

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

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

transition: transform 500ms linear;

Анимация с замедлением

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

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

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

transition: transform 500ms ease-out;

См. пример анимации с замедлением.

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

Анимация с ускорением

В отличие от анимации с замедлением, такая анимация начинается медленно, а заканчивается на высокой скорости.

Кривая анимации с ускорением.

См. пример анимации с ускорением.

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

При написании анимации с ускорением, так же, как и анимации с замедлением и линейной анимации, нужно использовать ключевое слово:

transition: transform 500ms ease-in;

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

Анимация с ускорением в начале и сзамедлением в конце

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

Кривая анимации с ускорением в начале и с замедлением в конце.

См. пример анимации с ускорением в начале и с замедлением в конце.

Будьте осторожны, не следует делать анимацию слишком длительной из-за медлительности начальной фазы анимации. Как правило, лучше всего годится анимация продолжительностью в диапазоне 300–500 мс, однако точное время будет в значительной мере зависеть от ощущения, формируемого вашим проектом. Из-за медленного начала, быстрой середины и медленной завершающей фазы время просмотра анимации пользователем увеличивается, что может быть весьма приятным для него.

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

transition: transform 500ms ease-in-out;