Дизайн морфинг-анимации интерфейса

Как одна форма проводит через весь ролик

Ролик длится 14 секунд при 120 BPM, что по исходным заметкам делится на 7 тактов. Одна форма начинает как кнопка Generate, затем становится лоадером, галочкой, dynamic island, музыкальным плеером, слайдером громкости, переключателем, индикатором вкладок, графиком, командной палитрой и тостом, после чего возвращается к кнопке.

Компромисс в том, что каждое состояние должно достигаться из предыдущего изменением размера и скруглений того же тела. Содержимое, не вписывающееся в такое изменение формы, приходится убирать или переделывать.

Как читать кадры с плеером, вкладками и палитрой

Три захваченных кадра показывают, насколько по-разному может выглядеть одна и та же форма. В плеере чёрная скруглённая карточка несёт градиентную обложку, «motion study 02», полосу перемотки на 0:49 с остатком −2:09 и значки «назад», «играть» и «вперёд». В кадре с вкладками белая пилюля содержит Day, Week и Month, а за Day расположен чёрный индикатор.

В палитре набранное слово «frame» приводит к двум результатам: «Frame rate · 60fps» и «Every frame is code», первый из которых выделен.

01

Читаемые состояния воспроизведения

Метки прошедшего и оставшегося времени расположены под полосой прогресса. Это иллюстративное содержимое интерфейса внутри 14-секундного ролика, а не длительность видео showcase. При адаптации плеера под меньший холст сохраняйте обе метки чёткими.

02

Индикатор вкладки — движущийся объект

Чёрная пилюля Day находится внутри белой дорожки, пока курсор наведён на Month. Поскольку индикатор — отдельная форма, он может скользить и растягиваться между подписями, а не просто менять подсветку.

03

Текст палитры соответствует ролику

Результаты «Frame rate · 60fps» и «Every frame is code» говорят о самой работе. Используйте эту идею, но замените строки словарём вашего продукта.

Построение через время и его компромиссы

Исходные заметки описывают единую функцию render(t), которая рисует весь кадр по времени главного таймлайна. Каждое видимое значение — чистая функция от t с использованием easing, пружин или ключевых кадров, а состояние между кадрами не переносится. Поэтому перемотка назад воспроизводит идентичные кадры.

Это делает экспорт предсказуемым, но требует от автора больше работы. Взаимодействия, которые с обработчиками событий были бы тривиальны, например наведение или набор текста, нужно описывать как ключевые кадры по времени.

1. Держите одни часы

   Главный таймлайн GSAP — единственные часы. Слои читают его текущее время, а не запускают собственные таймеры.

2. Суммируйте пружины для каждого изменения

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

3. Пусть курсор вызывает всё

   Перед каждой сменой состояния нужно действие указателя. Без этого правила морфинг выглядит украшением, а не взаимодействием.

Источник и границы

Это официальный ремейк и адаптация кодом от OpenDesign моушн-работы, изначально опубликованной @twoclipping в X. Он воссоздан в коде по опубликованной работе, а 14-секундный саундтрек — оригинальная музыка, а не аудио из источника. Упоминание автора служит фактической ссылкой и не подразумевает одобрения со стороны оригинального автора.

Это отрендеренное моушн-исследование, а не готовый интерфейсный продукт. Плеер, график и палитра внутри ролика не реагируют на ввод. Шаблон взят из предлагаемого видеопроцесса OpenDesign; доступность зависит от установленной версии.

Адаптация морфинга под ваш продукт

Заметки советуют заменить состояния в определении SHAPE и их содержимое, сохранив три правила: одна форма без склеек, пружины суммируются для каждого изменения, и за каждым изменением стоит курсор. Начните со списка пяти состояний продукта, которые важнее всего показать, затем расположите их от самого маленького контейнера к самому большому.

Если нужен цикл, сделайте первое и последнее состояния одинаковыми. Если состояния сильно различаются по размеру, ожидайте, что промежуточные кадры будут выглядеть растянутыми, и соответственно замедлите темп.