Движение — старейший язык, которым владеет человек. Задолго до слов и знаков люди читали смысл в движении: быстрое — опасное, медленное — безопасное, плавное — живое, резкое — механическое. Эта система декодирования встроена в нас на уровне, который не поддаётся сознательному контролю. И именно её используют дизайнеры, когда думают об анимации.
Анимация в интерфейсе — это не украшение. Это форма коммуникации. Каждое движение несёт информацию о природе объекта, его иерархии, о причинно-следственных связях между элементами. Хорошо спроектированная анимация делает интерфейс понятнее — не потому что объясняет, а потому что он начинает ощущаться правдоподобно.
Кривая смягчения — это характер
Линейное движение не встречается в природе. Ни одно живое существо, ни один физический объект не движется с постоянной скоростью от начала до конца. Именно поэтому линейная анимация воспринимается как механическая, чужеродная, неудобная. Мозг считывает её как «ненастоящую».
Кривые смягчения (easing) имитируют физику реального мира: разгон, торможение, инерция. Ease-in-out — классика, которая работает почти всегда. Ease-out — для элементов, появляющихся на экране (они «прилетают» и тормозят). Ease-in — для исчезающих элементов (они «улетают», набирая скорость). Spring-анимация добавляет упругость — ощущение веса и эластичности.
Длительность как высказывание
Продолжительность анимации — это не техническая константа, а дизайнерское решение. Слишком быстрая анимация — и пользователь теряет контекст изменения, переход становится незаметным. Слишком медленная — и интерфейс начинает ощущаться тяжёлым, вязким, раздражающим.
Общее правило: микро-взаимодействия (hover, нажатие, небольшие изменения состояния) — 80–150 миллисекунд. Переходы между экранами и состояниями — 200–400 миллисекунд. Сложные нарративные анимации — до 600 миллисекунд. Всё, что длиннее, должно быть оправдано содержанием, а не желанием произвести впечатление.
«Лучшая анимация — та, которую не замечают. Её замечают только тогда, когда она исчезает.»
Анимация как обратная связь
Одна из важнейших функций движения в интерфейсе — подтверждение действия. Нажатие кнопки, добавление в корзину, отправка формы — каждое из этих действий порождает вопрос «оно сработало?». Анимация отвечает на этот вопрос быстрее, чем любой текстовый статус.
Маленькое покачивание иконки, мгновенное изменение масштаба, «расходящиеся волны» от точки касания — всё это микро-нарративы, которые говорят: «да, я тебя услышал, действие выполнено». Без этой обратной связи интерфейс ощущается немым и недостоверным.