Как подобрать тайминг для 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 для десктопов.
