§II.09 · МОУШН И АНИМАЦИЯ · РЕМЕСЛО МЕЖДУ ДВУМЯ ПОЗАМИ

Анимация:всё,что происходитмеждудвумя позами.

Моушн и есть то, из-за чего бренд ощущается современным. Он в скролле вашего сайта, в переходах приложения, в социальных лупах, в рекламе. Сделанный правильно, он невидим: люди чувствуют живой бренд и не могут сказать почему. Сделанный неправильно, он каждый декоративный спиннер загрузки в интернете. Разница никогда не в позах. Она в промежуточных кадрах: изинг, упреждение, доводка, вес. Это ремесло мы и продаём.

Привести в движение Смотреть кривые

⟢ это появление · пять строк с шагом 90ms · cubic-bezier(0.16, 1, 0.3, 1) · принцип: упреждение · каждая строка замахивается, прежде чем сесть

kf·02 · график тайминга

Изинг отличает сдвинутое от движущегося.

Два ключевых кадра это факт. Кривая между ними это мнение: о весе, об уверенности, о том, насколько ваш бренд готов спешить. Линейное движение читается как механизм; движение с изингом читается как намерение. Мы проектируем эту кривую намеренно для каждой скролл-последовательности, hover-состояния, перехода и анимированного демо, а потом настраиваем, пока вы не перестанете её замечать. Моушн работает на сообщение. Он никогда не украшает вокруг него.

01ease-out expocubic-bezier(0.16, 1, 0.3, 1)
Появление. Быстро со старта, мягко в кресло: так уверенные вещи входят в комнату.
02ease-in-outcubic-bezier(0.65, 0, 0.35, 1)
Переход. Уходит решительно, приземляется по плану. Для движений между состояниями.
03пружинаовершут, потом оседание
Характер. На несколько процентов дальше отметки, потом домой. Применять редко, запоминается всегда.
04 · 05linear и steps()честные
Линейный для механизмов: тикеры, скрабы, прогресс. Ступенчатый для позы к позе: самый старый изинг анимации.

⟢ эти четыре ячейки · задержки каскада 0 / 110 / 220 / 330ms · тот же ease-out, нарисованный выше мандариновым · принцип: медленный вход, медленный выход

урок · kf·03 · от позы к позе

Позы дёшевы. Промежутки и есть ремесло.

P.01

Упреждение

Замах перед движением. Пиксель замаха покупает милю правдоподобия. Эта карточка откинулась назад, прежде чем сесть.

−6px замах · 90ms

P.02

Овершут

Дальше отметки, потом оседание. У уверенности есть инерция; эта карточка пришла на пять процентов больше нарочно.

scale 1.05 → 1.00

P.03

Вторичное действие

Вещь и то, что рядом с ней. Следите за точкой: она садится на долю позже карточки, и карточка от этого кажется тяжелее.

ведомый · +220ms

P.04

Сценичность

Движется одно за раз, чтобы глаз всегда знал, где быть. Эта карточка дождалась своей очереди.

задержка 540ms · последняя

P.05

Ритм

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

steps(4) · счёт на четыре

P.06

Инерция

Масса оставляет след. Тяжёлые вещи приходят поздно и честно. Эта карточка шла дольше всех, и ей вы поверили больше всего.

900ms · задний край

⟢ каждая карточка выше пришла по принципу, которому учит: замах замахнулся, овершут перелетел, а инерция шла дольше всех

kf·04 · свет гаснет

Один моушн объясняет. Другой просто делает выход.

Анимация логотипа. Интро кейсов. Титры, после которых квартальная презентация ощущается как премьера. А между выходами эксплейнеры: схемы состава, которые строят себя сами, флоу приложений, которые ведут пользователя за руку, последовательности «как это работает», которые говорят то, чего не может сказать ваша продающая страница. Когда вещь сложна, моушн делает её очевидной. Когда вещь ваша, моушн делает её незабываемой.

⟢ эта анимация · штрихи рисуются один раз при появлении · 1.4с · с шагом 0 / 400 / 800ms · потом держится. появление случается однажды, как первое впечатление

kf·05 · плёнка результатов

Каждое размещение получает нативную версию.

Один язык движения, экспортированный в каждый формат и с любой частотой кадров, которые просит платформа. Вы описываете движение один раз, а плёнка ниже это то, что возвращается.

.lottieнативен вебу · невесом · передаётся чисто
.mp4соцсети · реклама · везде, где есть лента
.webmвеб-видео · прозрачная альфа
.gifгде старое ещё требует

на вашем диске, когда мы закончим

Моушн-ассеты для каждого размещения
Lottie для веба
MP4 для соцсетей
Исходники для доработок

⟢ чипы выше · с интервалом 70ms, по одному · принцип: сценичность · глаз всегда знает, где быть

kf·06 · экспозиционный лист

Как идёт работа, кадр за кадром.

AПОДДЕРЖАТЬ

Моушн работает на сообщение. Он никогда не украшает вокруг него. У каждого движения на листе есть работа; те, у которых её нет, стираются раньше, чем вы их увидите.

кадры 001–024

BПОСТРОИТЬ

Скролл-последовательности, hover-состояния, переходы, анимированные демо, поставленные в те поверхности, где они живут на самом деле, а не прикрученные потом.

кадры 024–072

CОБЪЯСНИТЬ

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

кадры 072–108

DЭКСПОРТ

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

кадры 108–132

EПЕРЕДАТЬ

Lottie для веба, чтобы ничто не раздувало вес страницы. Исходники остаются у вас, чтобы доработка никогда не начиналась с нуля.

кадры 132–144

⟢ строки сели с интервалом 80ms по ease-out · принцип: ритм · доля, которую можно сосчитать

KF·КОНЕЦ · ОСЕДАНИЕ

У вашего бренда две позы: где он есть и куда идёт.

Мы анимируем промежуток.

Начать промежуток

⟢ выход: холд. ни одна анимация не задерживается дольше, чем ей рады.