Автор: Саша Окунев Уровень: для начинающих
В Фигме есть механизм анимации векторных объектов, который называется Smart Animate. Он позволяет анимировать ширину, высоту, опасити и другие свойства.
Два фрейма при этом берут на себя функцию ключевых экранов начала и окончания анимации. Анимация может быть настроена для момента перехода с одного фрейма на другой.
В этом уроке мы сделаем простой прототип с кнопкой Скачать, лоадером и иконкой подтверждения, что что-то скачалось.
Что получится:
Проект в Figma Community Можно дублировать себе и разобрать самостоятельно
- Создаём фрейм 320х200, рисуем в нём кнопку.
- Дублируем фрейм,
Cmd
D
. Во втором удаляем кнопку и рисуем два прямоугольника 256x8 со скруглёнными углами, которые наложены друг на друга. Нижний называем «1», он будет телом лоадера, верхний — «2», он будет заполняющейся частью. Подтягиваем 2 за правый край, чтобы он был покороче. 1 делаем на 20% опасити. - Дублируем второй фрейм. Третий фрейм будет показывать загруженный лоадер.
- Дублируем фрейм и на следующем задаём слою 2 размер 32 х 32. Фиксируем пропорции функцией Constrain Proportions.
- На следующем фрейме делаем слой 2 немного больше, 40х40. Смещаем на центр. При помощи пера рисуем галку, зажав
Shift
. Толщина — 5. - Теперь скликаем прототип и настроем анимации. Выделяем кнопку на первом, открываем вкладку Prototype,
Alt
9
, перетаскиваем связь от кнопки на второй фрейм. Меняем анимацию c Instant на Dissolve, чтобы переход между кнопкой и лоадером был с эффектом фейда. за эту треть секунды мы будем видеть постепенно проявляющийся фрейм 2 без анимации и успеем осознать его, прежде чем начнётся движение лоадера. Если запускать анимацию без этого перехода с паузой, мы осознаем лоадер уже в момент, когда началось движение, а это не очень комфортно. Когда начинается анимация, мы должны быть к ней готовы. - На весь второй фрейм вешаем связь к третьему. Это главный переход, в котором мы задаём длительность заполнения лоадера.
- Вешаем связь между фреймами 3 и 4. Здесь мы определяем задержку до начала морфинга лоадера в иконку. Я использовал небольшое значение в 200ms, чтобы немного отделить анимацию движения лоадера от анимации морфинга. Тип анимации остаётся Smart Animate, тип сглаживания — Ease Out, время морфинга — 300ms.
- Вешаем связь между фреймами 4 и 5. В этом переходе будет проявляться галочка, а зелёный круг будет увеличиваться с 32 до 40.
- Чтобы придать галочке эффектности, при проявлении мы двигаем её сверху вниз, чтобы она кивала. Для этого мы копируем её на фрейм 4 и немного смещаем по Y, а затем уводим в 0% опасити.
- Анимация готова. Запускаем прототип, нажав кнопку Present.
- Растягиваем фрейм на весь экран, нажимая
Z
, пока не долистаем до режима Zoom: Fit. На больших экранах и слабых видеокартах просмотр анимации в таком режиме может привести к понижению FPS, в этом случае уменьшаем размер окна.
Растягиваем верхний прямоугольник до длины нижнего, чтобы заслонить нижний.
Важно, чтобы слой назывался так же, как на предыдущем экране, потому что при помощи названий слоёв Фигма связывает переходы.
Ставим слой 2 на центр: Alt
H
, Alt
V
.
Слой 1 удаляем с фрейма 4.
Меняем тип триггера с On Click на After Delay. Это означает, что анимация будет запускаться по таймеру без каких-либо активных действий с нашей стороны. Ставим дилей на минимум: 1ms.
Длительность анимации — 2000ms, что составит 2 секунды, что довольно долго.
Переключаем анимацию в Smart Animate, ставим тип сглаживания Ease In And Out. Это значит, что она будет медленно начинаться, ускоряться к середине и замедляться в конце.
В реальной жизни, когда что-то загружается, эта анимация будет не такой гладкой, но наша задача здесь — показать, что она в принципе есть.
Поскольку ранее мы удалили слой 1 на фрейме 4, во время этого перехода он будет фейдом уходить в 0, поскольку Фигма не обнаружит его.
Захлёст
Чтобы анимация круга была более интересной, мы выберем тип сглаживания Ease In and Out Back. Он предполагает, что анимация имеет захлёст, из-за которого круг на какое-то время увеличится даже больше, чем 40 х 40, а затем уменьшается до размера 32 x 32.
Подробнее про захлёст можно узнать в принципе анимации №5.
Настроенная связь:
Настройки анимации:
Поскольку на предыдущем шаге мы поставили Ease In And Out Back, у галочки тоже будет захлёст: она сдвинется ниже обычного положения, а затем вернётся в центр круга.
После просмотра анимации можно вернуться на первый фрейм, нажав Restart R
.
Бонус
Чтобы записать анимацию в формат видео, на Маке можем использовать Quick Time Player. Для начала записи нажимаем в нём Ctrl
Cmd
N
выбираем режим записи фрагмента окна. Затем, чтобы подрезать записанное видео, используем функцию Trim, Cmd
T
. Видео сохранится в формат .mov.
На Windows для записи экрана можно использовать OBS Studio. Есть для обоих платформ и может записывать сразу в универсальный формат .mp4.
Наверх