Продолжительность и замедление

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

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

Переходы на мобильных устройствах обычно происходят в течение 300 мс с учетом этого различия:
* Большие, сложные, полноэкранные переходы могут иметь более длительный период, происходящий более 375 мс;
* Элементы, попадающие на экран, появляются более 225 мс;
* Элементы, покидающие экран, происходят в течение 195 мс;
Переходы, превышающие 400 мс, могут показаться слишком медленными.

Продолжительность таблеток должна быть на 30% дольше, чем на мобильном телефоне. Например, длительность мобильной 300 мс увеличится до 390 мс на планшете.

Настольные анимации должны быть быстрее и проще, чем их мобильные аналоги. Эти анимации должны длиться от 150 мс до 200 мс. Поскольку настольные переходы могут быть менее заметными, они должны быть немедленно реагировать и быстрее, чем их мобильные аналоги.

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

Длительность на носимых должна быть на 30% меньше, чем на мобильных. Например, 300 мс для мобильных устройств будет носить 210 мс на носимых.

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

Стандартная кривая «ease in out» является наиболее распространенной кривой замедления. Элементы быстро ускоряются и медленно замедляются между локациями на экране. Это относится к растущему и сокращающемуся материалу, среди других изменений свойств.

CSS: cubic-bezier(0.4, 0.0, 0.2, 1);

Используя кривую замедления «ease out», элементы входят в экран на полной скорости и медленно замедляются до точки покоя.

Во время замедления элементы могут масштабироваться либо по размеру (до 100%), либо по непрозрачности (до 100%). В некоторых случаях, когда элементы попадают на экран с 0% непрозрачностью, они могут слегка уменьшаться при увеличении размера при входе.

CSS: cubic-bezier(0.0, 0.0, 0.2, 1);

Используя элементы ускорения «ease in», элементы покидают экран на полной скорости. Они не замедляются при выключении экрана.

Они ускоряются в начале анимации и могут уменьшаться в любом размере (до 0%) или непрозрачности (до 0%). В некоторых случаях, когда элементы покидают экран с 0% непрозрачностью, они также могут слегка увеличивать или уменьшать размер.

CSS: cubic-bezier(0.4, 0.0, 1, 1);

Использование резкой кривой «ease in out» элементы быстро ускоряются и замедляются. Он используется для выхода из элементов, которые могут вернуться на экран в любое время.

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

CSS: cubic-bezier(0.4, 0.0, 0.6, 1);