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