Install plugin

Aninix

Install plugin

Learn

Как подобрать тайминг для UI анимации

Небольшой гайд, который поможет подобрать правильный тайминг для любой UI анимации

Финальная таблица таймингов (в миллисекундах)

Тип анимации

Mobile

Tablet

Desktop

Быстрая

60-200

120-400

240-800

Средняя

200-400

400-800

800-1600

Медленная

400-550

800-1100

1600-2200

Теория получения таймингов

Длительность анимации варьируется в зависимости от:

Размера объекта

Расстояния, которое проходит объект во время движения

Сложности дополнительных анимаций

💡 Формула просчёта продолжительности анимации

+ размер объекта

+ расстояние, на которое он перемещается

+ сложность анимации внутри объекта

= больше времени на анимацию.

Прямо-пропорциональная зависимость.

Как выбрать конкретные временные рамки

1. Здесь на помощь приходит физиология (https://ru.wikipedia.org/wiki/Окулография). Движения глаз разделяют на два типа: саккада и фиксация.

Фиксация взгляда при чтении занимает 200ms, при просмотре изображений – 350ms.

А саккада (длительность между фиксациями) занимает 200ms.

2. Ещё был проведён эксперимент, который вывел фи-феномен: людям показывали последовательно загорающиеся источники света с разной задержкой.

• до 60ms люди считали, что источники загораются одновременно;

• от 60ms до 200ms – один источник света движется;

• от 200ms – была видна задержка между включениями источника света.

Исходя из скучных данных можно сделать следующие выводы:

• от 60ms до 200ms для быстрых анимаций;

• от 200ms до 400ms для средних анимаций;

• от 400ms до 550ms для сложных анимаций.

Коэффициенты

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

• 1 для мобильных;

• 2 для планшетов;

• 4 для десктопов.

Итого получается таблица таймингов

Присоединяйтесь к сообществу успешных UI аниматоров

Скачать плагин