Микроанимации и переходы в интерфейсе: тайминг, easing, амплитуда

Что такое микроанимация простыми словами

Представь две кнопки. Первая молча меняет цвет - щёлк, и всё. Вторая на долю секунды чуть проседает под пальцем, как настоящая клавиша, и плавно отпускается. Угадай, какая ощущается живой? Вторая. А разница - буквально пара десятых секунды движения. Вот это и есть микроанимация: малюсенький отклик интерфейса на твоё действие.

Микро - потому что она крошечная и сама по себе почти незаметная. Её задача не показать фокус. Её задача - тихо сказать: «услышал, всё идёт как надо». Хорошая микроанимация работает как кивок собеседника. Ты её не замечаешь. Но убери - и разговор кажется мёртвым.

Сразу разведём два слова, которые вечно путают. Микроанимация - это отклик на действие: нажал, навёл, переключил. Переход - плавная смена одного состояния другим: меню выехало, карточка раскрылась. Логика у них одна, поэтому держим в одном уроке.

Зачем нужны анимации в интерфейсе

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

• Обратная связь. Движение подтверждает: действие сработало. Без него человек жмёт кнопку второй раз - на всякий случай.
• Понятная навигация. Меню выезжает, а не выпрыгивает рывком - и мозг сразу видит, откуда оно взялось и куда вернётся. Резкие скачки дезориентируют.
• Ощущение качества. Плавные отклики читаются как «сделано с любовью». Та же логика, что у дорогой кнопки, только в динамике.
• Внятный бриф нейронке. Вместо «оживи как-нибудь» ты скажешь: «короткий hover с лёгким подъёмом и плавным easing». Это и есть разница между новичком и тем, кто видит детали.

Девять из десяти бесящих анимаций - это не «слишком мало движения». Это слишком долго, слишком резко по плавности или слишком большая амплитуда. Перебор раздражает сильнее, чем полное отсутствие.

Из чего состоит хорошая анимация: три кирпича

Любая микроанимация держится на трёх вещах. Сам эффект - вторичен. Решают именно эти три параметра.

Тайминг анимации - сколько она длится

Тут правит одно слово: коротко. Интерфейс должен поспевать за человеком, а не заставлять его ждать. Мелкий отклик - нажатие, наведение - совсем быстрый, около десятой доли секунды. Переход покрупнее - выезд панели, раскрытие карточки - подлиннее, но всё равно в районе трети секунды.

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

Easing (плавность) - как анимация разгоняется и тормозит

Самый недооценённый параметр. Easing Easing (плавность, кривая ускорения) - закон, по которому меняется скорость анимации во времени. Линейный easing - равномерное движение от начала до конца. «Ease-out» разгоняется быстро и плавно тормозит к концу - именно он чаще всего ощущается естественным в интерфейсах. - это про то, движется ли элемент равномерно или по-живому: с разгоном и торможением.

В реальном мире ничто не стартует и не тормозит мгновенно. Машина разгоняется. Мяч замедляется. Линейная, ровная анимация ломает эту интуицию и сразу читается как «дёшево, машинно». А движение, которое быстро берёт старт и мягко тормозит к концу, кажется естественным. Его и хочется почти всегда.

Амплитуда анимации - насколько сильно элемент двигается

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

Беда начинается, когда амплитуду выкручивают на максимум: элементы летают через пол-экрана, скачут, пружинят. Первый раз - вау. Третий - раздражает. Десятый - хочется выключить. Микроанимация на то и микро: её должно быть видно, но не слышно.

Где микроанимации уместны, а где нет

Не всё подряд нужно оживлять. Анимируй там, где движение что-то объясняет, и оставляй в покое то, что и так понятно.

• Состояния кнопок и ссылок. Hover и нажатие - классика. Лёгкий подъём, смена цвета, рост тени. Это первое, что делает интерфейс отзывчивым.
• Появление и исчезновение. Тосты, модалки, выпадающие меню, подсказки. Пусть выезжают и тают, а не мигают рывком - тогда ясно, откуда они и куда уходят.
• Переключатели и галочки. Тумблер плавно перекатывается, чекбокс коротко отрисовывает галочку - крошечный, но приятный момент подтверждения.
• Загрузка и ожидание. Скелетоны-заглушки и плавные индикаторы говорят «работаю, подожди» куда лучше застывшего экрана.
• Смена раздела или экрана. Мягкий переход помогает мозгу понять, что одно сменилось другим, а не телепортировалось.

Пример: как оживить кнопку и модальное окно

Соберём отклик по тем же трём кирпичам - тайминг, плавность, амплитуда - и проговорим всё словами, чтобы это можно было отдать нейронке.

Добавь кнопке микроанимации. При наведении она чуть приподнимается и слегка светлеет, тень мягко растёт. При нажатии - проседает на пару пикселей, тень уменьшается, будто физическую клавишу вдавили. Длительность откликов короткая, около десятой доли секунды. Плавность - быстрый старт и мягкое торможение к концу, без линейного и без резкого обрыва. Амплитуда маленькая, движение еле заметное. Предусмотри спокойный вариант без движения для режима «уменьшить движение».

Сделай плавное появление модального окна. Фон-затемнение мягко проявляется, само окно чуть всплывает снизу и слегка увеличивается до нормального размера. Длительность - в районе трети секунды на появлении и заметно быстрее на закрытии. Плавность с мягким торможением к концу, без пружинного отскока. Никакого мигания и резких скачков. Для режима «уменьшить движение» окно просто появляется без сдвига и масштабирования.

Частые ошибки в микроанимациях

• Слишком долго. Анимация на полсекунды и больше превращает шуструю страницу в липкую. Укорачивай.
• Линейная плавность. Равномерное движение без разгона и торможения выдаёт «машину» и выглядит дёшево. Добавь мягкое торможение к концу.
• Огромная амплитуда. Элементы летают через пол-экрана и скачут. Видно, но утомляет. Микро - значит чуть-чуть.
• Анимируется всё подряд. Когда дёргается каждая мелочь, теряется главное и рябит в глазах. Оживляй только то, что объясняет действие.
• Мигание вместо перехода. Меню или модалка выпрыгивают рывком - мозг не успевает понять, откуда они взялись. Дай им выехать и плавно уйти.
• Исчезновение медленнее появления. Ждать, пока что-то лениво уползает с экрана, мучительно. Убирай элементы быстрее, чем показываешь.
• Игнор «уменьшить движение». Для части людей анимация - физический дискомфорт. Всегда оставляй спокойный запасной вариант.
• Пружина-отскок везде. Эффектно один раз, бесит на десятый. Держи пружину для редких акцентов, а не для каждой кнопки.