Анимация лоадера при помощи Smart Animate

Проект в Figma Community Можно дублировать себе и разобрать самостоятельно

1. Создаём фрейм 320х200, рисуем в нём кнопку.

2. Дублируем фрейм, Cmd D. Во втором удаляем кнопку и рисуем два прямоугольника 256x8 со скруглёнными углами, которые наложены друг на друга. Нижний называем «1», он будет телом лоадера, верхний — «2», он будет заполняющейся частью. Подтягиваем 2 за правый край, чтобы он был покороче. 1 делаем на 20% опасити.

3. Дублируем второй фрейм. Третий фрейм будет показывать загруженный лоадер.

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


4. Дублируем фрейм и на следующем задаём слою 2 размер 32 х 32. Фиксируем пропорции функцией Constrain Proportions.
⚠️

Важно, чтобы слой назывался так же, как на предыдущем экране, потому что при помощи названий слоёв Фигма связывает переходы.

Ставим слой 2 на центр: Alt H, Alt V.

Слой 1 удаляем с фрейма 4.


5. На следующем фрейме делаем слой 2 немного больше, 40х40. Смещаем на центр. При помощи пера рисуем галку, зажав Shift. Толщина — 5.

6. Теперь скликаем прототип и настроем анимации. Выделяем кнопку на первом, открываем вкладку Prototype, Alt 9, перетаскиваем связь от кнопки на второй фрейм. Меняем анимацию c Instant на Dissolve, чтобы переход между кнопкой и лоадером был с эффектом фейда. за эту треть секунды мы будем видеть постепенно проявляющийся фрейм 2 без анимации и успеем осознать его, прежде чем начнётся движение лоадера. Если запускать анимацию без этого перехода с паузой, мы осознаем лоадер уже в момент, когда началось движение, а это не очень комфортно. Когда начинается анимация, мы должны быть к ней готовы.


7. На весь второй фрейм вешаем связь к третьему. Это главный переход, в котором мы задаём длительность заполнения лоадера.


Меняем тип триггера с On Click на After Delay. Это означает, что анимация будет запускаться по таймеру без каких-либо активных действий с нашей стороны. Ставим дилей на минимум: 1ms.

Длительность анимации — 2000ms, что составит 2 секунды, что довольно долго.

Переключаем анимацию в Smart Animate, ставим тип сглаживания Ease In And Out. Это значит, что она будет медленно начинаться, ускоряться к середине и замедляться в конце.

В реальной жизни, когда что-то загружается, эта анимация будет не такой гладкой, но наша задача здесь — показать, что она в принципе есть.


8. Вешаем связь между фреймами 3 и 4. Здесь мы определяем задержку до начала морфинга лоадера в иконку. Я использовал небольшое значение в 200ms, чтобы немного отделить анимацию движения лоадера от анимации морфинга. Тип анимации остаётся Smart Animate, тип сглаживания — Ease Out, время морфинга — 300ms.

Поскольку ранее мы удалили слой 1 на фрейме 4, во время этого перехода он будет фейдом уходить в 0, поскольку Фигма не обнаружит его.



9. Вешаем связь между фреймами 4 и 5. В этом переходе будет проявляться галочка, а зелёный круг будет увеличиваться с 32 до 40.

Захлёст

Чтобы анимация круга была более интересной, мы выберем тип сглаживания Ease In and Out Back. Он предполагает, что анимация имеет захлёст, из-за которого круг на какое-то время увеличится даже больше, чем 40 х 40, а затем уменьшается до размера 32 x 32.

📎

Подробнее про захлёст можно узнать в принципе анимации №5.

Настроенная связь:



Настройки анимации:


10. Чтобы придать галочке эффектности, при проявлении мы двигаем её сверху вниз, чтобы она кивала. Для этого мы копируем её на фрейм 4 и немного смещаем по Y, а затем уводим в 0% опасити.

Поскольку на предыдущем шаге мы поставили Ease In And Out Back, у галочки тоже будет захлёст: она сдвинется ниже обычного положения, а затем вернётся в центр круга.


11. Анимация готова. Запускаем прототип, нажав кнопку Present.

12. Растягиваем фрейм на весь экран, нажимая Z, пока не долистаем до режима Zoom: Fit. На больших экранах и слабых видеокартах просмотр анимации в таком режиме может привести к понижению FPS, в этом случае уменьшаем размер окна.

Подпишись на /designer — канал, паблик и образовательный сайт о дизайне интерфейсов. О Фигме, инструментах, дизайн-менеджменте и работе продуктового дизайнера в корпорациях.

Бонус

Наверх:

/designer