Создаём фрейм 320х200, рисуем в нём кнопку.
Дублируем фрейм, Cmd D. Во втором удаляем кнопку и рисуем два прямоугольника 256x8 со скруглёнными углами, которые наложены друг на друга. Нижний называем «1», он будет телом лоадера, верхний — «2», он будет заполняющейся частью. Подтягиваем 2 за правый край, чтобы он был покороче. 1 делаем на 20% опасити.
Дублируем второй фрейм. Третий фрейм будет показывать загруженный лоадер.
Растягиваем верхний прямоугольник до длины нижнего, чтобы заслонить нижний.
Дублируем фрейм и на следующем задаём слою 2 размер 32 х 32. Фиксируем пропорции функцией Constrain Proportions.
<aside> ⚠️ Важно, чтобы слой назывался так же, как на предыдущем экране, потому что при помощи названий слоёв Фигма связывает переходы.
</aside>
Ставим слой 2 на центр: Alt H, Alt V.
Слой 1 удаляем с фрейма 4.
На следующем фрейме делаем слой 2 немного больше, 40х40. Смещаем на центр. При помощи пера рисуем галку, зажав Shift. Толщина — 5.
Теперь скликаем прототип и настроем анимации. Выделяем кнопку на первом, открываем вкладку Prototype, Alt 9, перетаскиваем связь от кнопки на второй фрейм. Меняем анимацию c Instant на Dissolve, чтобы переход между кнопкой и лоадером был с эффектом фейда. за эту треть секунды мы будем видеть постепенно проявляющийся фрейм 2 без анимации и успеем осознать его, прежде чем начнётся движение лоадера. Если запускать анимацию без этого перехода с паузой, мы осознаем лоадер уже в момент, когда началось движение, а это не очень комфортно. Когда начинается анимация, мы должны быть к ней готовы.
На весь второй фрейм вешаем связь к третьему. Это главный переход, в котором мы задаём длительность заполнения лоадера.
Меняем тип триггера с On Click на After Delay. Это означает, что анимация будет запускаться по таймеру без каких-либо активных действий с нашей стороны. Ставим дилей на минимум: 1ms.
Длительность анимации — 2000ms, что составит 2 секунды, что довольно долго.
Переключаем анимацию в Smart Animate, ставим тип сглаживания Ease In And Out. Это значит, что она будет медленно начинаться, ускоряться к середине и замедляться в конце.
В реальной жизни, когда что-то загружается, эта анимация будет не такой гладкой, но наша задача здесь — показать, что она в принципе есть.
Вешаем связь между фреймами 3 и 4. Здесь мы определяем задержку до начала морфинга лоадера в иконку. Я использовал небольшое значение в 200ms, чтобы немного отделить анимацию движения лоадера от анимации морфинга. Тип анимации остаётся Smart Animate, тип сглаживания — Ease Out, время морфинга — 300ms.
Поскольку ранее мы удалили слой 1 на фрейме 4, во время этого перехода он будет фейдом уходить в 0, поскольку Фигма не обнаружит его.
Вешаем связь между фреймами 4 и 5. В этом переходе будет проявляться галочка, а зелёный круг будет увеличиваться с 32 до 40.
Захлёст
Чтобы анимация круга была более интересной, мы выберем тип сглаживания Ease In and Out Back. Он предполагает, что анимация имеет захлёст, из-за которого круг на какое-то время увеличится даже больше, чем 40 х 40, а затем уменьшается до размера 32 x 32.
<aside> 📎 Подробнее про захлёст можно узнать в принципе анимации №5.
</aside>
Настроенная связь:
Настройки анимации:
