Автор: Саша Окунев Уровень: для начинающих
В Фигме есть механизм анимации векторных объектов, который называется Smart Animate. Он позволяет анимировать ширину, высоту, опасити и другие свойства.
Два фрейма при этом берут на себя функцию ключевых экранов начала и окончания анимации. Анимация может быть настроена для момента перехода с одного фрейма на другой.
В этом уроке мы сделаем простой прототип с кнопкой Скачать, лоадером и иконкой подтверждения, что что-то скачалось.
Что получится:
- Создаём фрейм 320х200, рисуем в нём кнопку.
- Дублируем фрейм,
CmdD. Во втором удаляем кнопку и рисуем два прямоугольника 256x8 со скруглёнными углами, которые наложены друг на друга. Нижний называем «1», он будет телом лоадера, верхний — «2», он будет заполняющейся частью. Подтягиваем 2 за правый край, чтобы он был покороче. 1 делаем на 20% опасити. - Дублируем второй фрейм. Третий фрейм будет показывать загруженный лоадер.
- Дублируем фрейм и на следующем задаём слою 2 размер 32 х 32. Фиксируем пропорции функцией Constrain Proportions.
- На следующем фрейме делаем слой 2 немного больше, 40х40. Смещаем на центр. При помощи пера рисуем галку, зажав
Shift. Толщина — 5. - Теперь скликаем прототип и настроем анимации. Выделяем кнопку на первом, открываем вкладку Prototype,
Alt9, перетаскиваем связь от кнопки на второй фрейм. Меняем анимацию 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.
Настроенная связь:
Настройки анимации:
Поскольку на предыдущем шаге мы поставили Ease In And Out Back, у галочки тоже будет захлёст: она сдвинется ниже обычного положения, а затем вернётся в центр круга.
После просмотра анимации можно вернуться на первый фрейм, нажав Restart R.
Бонус
Чтобы записать анимацию в формат видео, на Маке можем использовать Quick Time Player. Для начала записи нажимаем в нём Ctrl Cmd N выбираем режим записи фрагмента окна. Затем, чтобы подрезать записанное видео, используем функцию Trim, Cmd T. Видео сохранится в формат .mov.
На Windows для записи экрана можно использовать OBS Studio. Есть для обоих платформ и может записывать сразу в универсальный формат .mp4.
Наверх
