Практическая работа

Основы анимации в редакторе Figma

Цель работы: научиться анимировать (вращать, перемещать, трансформировать) элементы интерфейса

Оборудование: Word, Figma

Методические указания

Теоретическая часть.

Анимацию используют, чтобы интерфейс приложения или сайта был удобным и понятным для пользователя. 

Цель любой анимации — подсказать пользователю, как взаимодействовать с теми или иными элементами интерфейса.

Дизайнер может придумать стильный и современный дизайн кнопки. Но если её будет неудобно нажимать, весь его смысл теряется. Анимация помогает посетителю сайта понять, кликабелен элемент или нет. Но слишком большое количество анимированных элементов или слишком долгие анимации могут раздражать пользователей.

С помощью фигмы создают кликабельные прототипы, которые удобно презентовать клиенту и передавать разработчикам.

С помощью плагинов в Figma можно создать разные эффекты: от анимации кнопки или текста при наведении до более сложных, например параллакса — популярного эффекта, в котором разные элементы интерфейса двигаются с разной скоростью.

Чтобы сделать анимацию любого элемента, например текста или кнопки, нужна вкладка Prototype на правой верхней панели.

На этой вкладке нужно выделить один фрейм, потянуть за кружок и дотянуть стрелку до другого фрейма, так между ними образуется связь

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

Триггеры — механизмы, с помощью которых в прототипе будет происходить действие. Вот несколько типов триггеров, которые существуют в Figma:

● on tap — действие произойдёт по тапу или клику;
● on drag — чтобы произошло действие, элемент требуется перетащить;
● while hovering — действие происходит при наведении на элемент;
● while pressing — действие происходит при удержании нажатия.

Действие показывает, что произойдёт дальше. Существует несколько типов действий:

● navigate to — переход к другому объекту или фрейму;
● open overlay — фрейм открывается поверх текущего (этот вариант удобно использовать для всплывающих окон);
● swap overlay — один фрейм заменяется другим;
● close overlay — фрейм, открытый поверх текущего, закрывается;
● back — возвращение к предыдущему экрану;
● scroll to — страница прокрутится до выбранного фрейма в рамках основного фрейма;
● open link — откроется ссылка.

Умная анимация в Figma

Smart animate (с англ. «умная анимация») — инструмент Figma, который позволяет быстро создавать анимацию при переходе от фрейма к фрейму. Особенность этого инструмента в том, что Figma сама достраивает промежуточные кадры между фреймами. Умная анимация позволяет создавать необычные кнопки или имитировать раскрытие элементов. Всё происходит автоматически, поэтому вникать в тонкости анимации не нужно.

Режимы простой анимации

Easing (с англ. «сглаживание») позволяет настроить для анимации текста или кнопки разные режимы, которые зависят от ускорения или замедления элемента в начале или в конце пути.
Вот основные типы сглаживания:

● Ease-in ― замедление в начале анимации

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

● Ease-out ― замедление в конце анимации

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

● Ease-in-out ― ускорение в начале, замедление в конце

ДЕЙСТВИЯ:

·         On click — при клике на объект (если выбран весь фрейм, а не объект, – то при клике на любую область фрейма).

·         On drag — при перетаскивании.

·         While hovering — при наведении.

·         While pressing — при удержании клика.

·         Key/gamepad — при нажатии на горячую клавишу.

·         Mouse enter — при появлении курсора в области объекта.

·         Mouse leave — при покидании объекта курсором.

·         Mouse down — в начале клика.

·         Mouse up — в конце клика.

·         After delay — после задержки, т.е. после определенного количества времени

Для выбора, что будет происходить после совершения выбранного нами события. Для этого нажимаем на список, где написано None, и открываем тем самым список вариантов:

·         None — ничего не происходит.

·         Navigate to — перейти к (другому объекту/фрейму).

·         Open overlay — наложить поверх текущего фрейма.

·         Scroll to — пролистать до другого объекта в рамках одного фрейма.

·         Swap overlay — заменить один фрейм другим.

·         Back — перейти назад.

·         Close overlay — закрыть объект, наложенный поверх фрейма с помощью Open Overlay.

·         Open link — перейти по ссылке.

Переходы:

·         Instant — мгновенно.

·         Dissolve — растворение.

·         Smart animate — умная анимация.

·         Move in — перемещение внутрь.

·         Move out — перемещение наружу.

·         Push — смахивание.

·         Slide in / Slide out — перемещение с растворением.

Практические задания

1. Вариант создания трансформации, передвижения из-за границ во внутрь фрейма, изменение цвета и т.д.

1. Трансформация. Создать во фрейме любую фигуру, скопировать этот фрейм

Изменить во втором фрейме форму фигуры, например, так:

Зайти во вкладку prototype,

Связать оба фрейма, выделив 1 фрейм и потянув стрелку ко 2 фрейму

On click оставить, нажать smart animate (умную анимацию),

Написать 600 сек. Изменить цвет второй фигуры

Для того, чтобы посмотреть анимацию, нужно добавить точку старта

Активировать 1 фрейм, нажать на + Flow starting point, обозначив начальную точку старта, дать название, например, «просмотр»

Откроется модальное окно воспроизведения. По щелчку мыши воспроизведется анимация.

И в обратную сторону также можно делать анимацию.

Посмотрите все варианты, как происходит анимация при разных условиях! Поэкспериментируйте!

2. Вариант создания кнопки

Создали фрейм со скругленными углами.

Обведем только сверху, чтобы придать объем

Далее за фреймом нарисовали несколько кругов разных размеров

Все круги находятся за фреймом, нужно переместить их во фрейм

Выделяем всю конструкцию, зажимаем Alt и всю конструкцию перетягиваем в сторону рядом.

и во второй конструкции вытягиваем (увеличиваем круги) не двигая с места, только

 растянуть!

Всю кнопку закрыть

Выделить первый фрейм, нажать clip content, чтобы скрыть все за фреймом и также со вторым проделать

Добавим света во второй фрейм, чтобы кнопка светилась

Добавим эффект тени

Взять пипетку и кликнуть по цвету (фиолетовому)

Выделить оба фрейма, добавляем компонент

Далее вкладка prototype, связать два фрейма, выставить параметры как на картинке:

Создаем еще один фрейм (до этого мы просто делали конструкцию кнопки)

Копируем из первого фрейма кнопку, вставляем в этот фрейм

Нажимаем Flow starting point (на плюс). Все, можно смотреть

3. Вариант Создания слайдера

Создать фрейм (1920X 1080)

Далее внутри этого фрейма еще два фрейма, делящихся первый фрейм ровно пополам, для удобства можно закрасить в разные цвета, чтоб не перепутать. Не прямоугольники, а фреймы!

Скачать 4 любых фото из интернета, одной тематики

Если не стоит галочка clip content, то поставить

Теперь копируем первое фото (из браузера или просмотровой программы) и вставляем, неважно куда фото вставится, выравниваем по центру и вертикали, и только потом переносим одно фото в правый фрейм 1 и другое фото в левый фрейм 1

По факту, изображение должно быть поделено на равные две половинки

Копируем теперь левый и правый фреймы в окне панели и вставляем еще раз, переименовываем в левый2, правый2, вставляем аналогично вторую картинку два раза, выравниваем и помещаем в эти фреймы

И также с 3 и 4 фото

Сделать кнопку, на ваш вкус и цвет

(в данном случае для примера – простая), помещаем по центру внизу главного фрейма

Теперь понадобится текст, любой

Берем инструмент фрейма и выделяем им самую нижнюю строку, (самую длинную), и сам текст в левой панели помещаем в этот фрейм

Активировав текст в панели слева, нажав на стрелку и не отпуская ее, поднять до первой строки.

Теперь нужно весь главный фрейм скопировать и переместить вправо (с зажатым Alt тянем вправо)

1) Раздвигаем изображения фото скопированного фрейма, передвигаем осторожно в разные стороны, один фрейм в одну, другой- в другую

Т.е. фото «разъехались» за пределы фрейма

2) следующее фото можно увеличить или уменьшить

Выбрав нужное изображение, зажав Shift+Alt, осторожно увеличиваем или уменьшаем. Помним, что их у нас два, нужно проделать операцию такую с обоими.

Чтобы при увеличении или уменьшении фото должны смотреться как единое

 Далее нужно текст переместить, выделить его в панели слева и стрелочкой прокрутить до 2 строки

3) идем в prototype

От кнопки на 1 фрейме ведем стрелку ко второму фрейму

Готово!

Теперь копируем второй фрейм, также раздвигаем в стороны фреймы, меняем строку текста, с помощью удержания и движения стрелки на тексте, не забыв текст активировать в панели слоев слева.

Тоже самое проделываем с 3 и 4 фреймом

Теперь связываем в prototype

 И смотрим, каждый раз кликая на кнопку.