UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Урок по созданию анимации в Figma, используя плагин Figmotion
Редакція
Редакція

Опубліковано

Урок по созданию анимации в Figma, используя плагин Figmotion

В этой статье вы узнаете, как создать в Figma, очень популярный в наши дни, продвинутый прототип.

И снова здравствуйте! После моей первой статьи о проектировании в InVision Studio круговой панели загрузки , я покажу вам нечто другое. Мы освоим Figmotion – плагин Figma, который вы можете использовать для создания продвинутых прототипов. А еще мы воссоздадим 4 самых полезных микровзаимодействия в мобильных приложениях.

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

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos. До написания этой статьи я планировал полностью воссоздать всё приложение, но, когда я дописал статью, я передумал. Так что сейчас вы читаете лишь часть первоначальной статьи.

Недавно Figma добавила плагины. Использование плагинов делает этот инструмент дизайна еще функциональнее. Мы используем эту новую функцию Figma и воссоздадим микровзаимодействия приложения Google Фото. Из этой статьи вы узнаете, как проектировать и воспринимать микровзаимодействия.

Приступим:

Мы будем воссоздавать эти страницы и их микровзаимодействия :)

  1. Сядьте и пристегните ремень.
  2. Откройте свой ноутбук и включите его.
  3. Откройте сайт Figma (или, если вы используете десктопную версию Figma, откройте приложение) и создайте новый файл. Чтобы создать новый файл в Figma, просто нажмите иконку «+» в верхней части экрана.
  4. Нажмите клавишу «F» на клавиатуре вашего ноутбука, чтобы создать новый фрейм (в Figma артборды называются фреймами).
  5. Выберете артборд «Google Pixel 2 XL» или создайте артборд с такими размерами: W = 411 px / H = 823 px. Первый фрейм мы назовем «Photos».

Хотите кофе?

  1. Нам нужно установить плагин под названием Figmotion и импортировать шрифты Google Sans (или Product Sans или Montserrat). Чтобы установить плагины, нажмите на гамбургер-меню в верхней части экрана и выберите опцию «Plugins». Затем выберите опцию «Manage Plugins», найдите плагин «Figmotion» и установите его.

Это потрясающий плагин! Возможно, Adobe XD должен поучиться у Figma и добавить временную шкалу в функцию «Auto Animate»

7. Отлично! Все готово. Теперь давайте вернемся к нашему артборду (извините, фрейму). Я хочу вам кое-что сказать, если вы не используете Android-девайсы:

У вас не всегда будет доступ к различным инструментам и устройствам, и иногда вам следует создавать дизайн для того, что вы никогда раньше не использовали (вам помогут Youtube и Google). Не допустите, чтобы что-то помешало вам формировать будущее дизайна!

Поскольку вы мне нравитесь, вы можете скачать Google Фото UI kit по ссылке ниже:

Элементы: Скачайте необходимые элементы

UI Kit: Скачайте Google Фото UI kit

В указанных выше файлах вы найдете элементы интерфейса Google Фото. Я настоятельно рекомендую вам не загружать UI Kit, пока вы не прочтете всю статью, а для этой статьи нам нужен только первый файл (необходимые элементы).

В этой статье не описано, как спроектировать в Figma компонент или дизайн-систему. Я знаю лучшие способы создания компонентов, но для простоты мы используем данные компоненты только в качестве необходимых элементов для воссоздания Google Фото.

8. Скопируйте и вставьте необходимые элементы в ваше рабочее пространство (файл, который вы создали ранее). Теперь вы должны увидеть что-то вроде этого:

Назовем первый артборд «Photos»

Нам не нужно больше двух артбордов, чтобы отдельно показать выпадающее меню (Dropdown menu) и боковую панель (Navigation Drawer). Итак, начнем с этих простых анимаций. Прежде чем начать, я хочу рассказать вам кое-что о Figmotion.

Figmotion работает как After Effects, и если вы хотите сделать анимацию, вам не нужно создавать разные артборды, потому что этот плагин не может соединять различные артборды и обнаруживать изменения, которые были применены к элементам артбордов.

Что такое состояния?

Представьте, что вы покупаете одежду в торговом центре «А»; Через полчаса вы идете в торговый центр «Б», чтобы купить что-нибудь еще. Когда вы покинули торговый центр «А» и пошли в торговый центр «Б», ваше местоположение на карте изменилось, но вы не изменились (я имею в виду, что вы все тот же человек).

Мы используем эту философию для создания анимации. Когда вы нажимаете на прямоугольник «А», и этот прямоугольник перемещается, вы не видите два разных прямоугольника. Вы просто видите, как изменяется положение прямоугольника на экране. Иногда мы меняем другие атрибуты элемента, такие как его непрозрачность, цвет и т.д., но мы не меняем сам элемент, мы просто изменяем его атрибуты.

Мы все еще видим квадрат, изменился только внешний вид этого квадрата. Представьте, что квадрат «переоделся»

Первая анимация: Появление боковой панели

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

Мы хотим воссоздать эту анимацию

Прочтите приведенные ниже шаги, чтобы воссоздать страницу «Photos», а также анимацию появления боковой панели:

  1. Создайте новый артборд и назовите его «Photos». Посмотрите gif-файл ниже, чтобы добавить необходимые элементы для воссоздания страницы «Photos»:

№1

  1. Теперь нам нужно добавить элементы, необходимые для боковой панели. Мы добавляем Navigation Drawer из раздела «Assets», а затем создаем черный прямоугольник, чтобы скрыть элементы позади Navigation Drawer (измените непрозрачность черного прямоугольника со 100% до 50%):

№2

  1. Откройте плагин Figmotion. Мы создадим 3 состояния: 0 миллисекунд (A), 300 миллисекунд (B), 700 миллисекунд (C). Мы установим непрозрачность черного прямоугольника для состояний A и B равной 0, а для состояния C зададим непрозрачность 0,5 (означает 50%):

№3 Мы изменили непрозрачность черного прямоугольника с 0 на 0,5 для третьего состояния. Таким образом, черный прямоугольник появляется, когда боковая панель начинает двигаться

  1. Теперь мы хотим показать боковую панель. Она отображается с левой стороны экрана. Поэтому нам нужно изменить ее положение по оси X с (-410) для состояний A и B на (0) для состояния C:

№4

  1. Внимательно прочитайте этот шаг, потому что мы будем использовать его дальше, чтобы воссоздать поведение при нажатии.
  • Нам нужно создать круг (Размер: 45px * 45px / Цвет: C4C4C4 / Непрозрачность: 50% / Эффект: Drop Shadow).
  • В отличие от других элементов, мы будем использовать для этого круга четыре состояния: 0 мс (A), 250 мс (B), 300 мс (C) и 350 мс (D). 700 мс (E) будет использоваться, чтобы показать изменения, которые были применены к непрозрачности круга.
  • Нам нужно изменить его координаты по осям X и Y (чтобы показать пользователям, что круг движется): A: X=322 / Y=138 B: X=27 / Y= 250 C: X=27 / Y= 250 D: X=27 Y= 250
  • Теперь нам нужно уменьшить его размер, при нажатии на гамбургер-меню: A: Ширина= 45 / Высота= 45 B: Ширина= 45 / Высота= 45 C: Ширина= 35 / Высота= 35 D: Ширина= 45 / Высота= 45
  • В качестве последнего изменения, мы скроем круг после нажатия на гамбургер-меню: A: Непрозрачность = 0.5 (и B) C: Непрозрачность = 0.5 ( и D) E: A: Непрозрачность = 0

№5 Изменения, которые нужно применить к кругу, чтобы имитировать поведение нажатия

Хорошая работа! Результат будет выглядеть примерно так:

Мы могли бы улучшить текущую форму анимации кликов или тайминг и даже плавность. Обещаю, в моей следующей статье вы узнаете, как это сделать :)

Вторая анимация: появление выпадающего меню

Теперь мы воссоздадим внешний вид выпадающего меню.

Мы собираемся воссоздать эту анимацию

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

Какой из них ближе к экрану? (Совет: чтобы узнать, какой элемент расположен поверх другого, посмотрите на их тени)

Чтобы воссоздать анимацию появления выпадающего меню, нам снова нужно создать артборд и использовать необходимые элементы. Выполните следующие шаги, чтобы воссоздать страницу «Photos», а также анимацию появления выпадающего меню:

  1. Создайте новый артборд и назовите его «Photos». Посмотрите на gif-файл ниже, чтобы добавить необходимые элементы для воссоздания страницы «Photos»:

№1

  1. Теперь нам нужно добавить необходимые элементы для выпадающего меню. Мы добавляем компонент «More» из раздела «Assets», а затем отключаем его, потому что хотим применить изменения к иконкам и форме выпадающего меню по отдельности.

Нам нужно изменить положение иконок выпадающего меню, а также ширину и высоту его формы, чтобы воссоздать вторую анимацию:

№2

  1. Преобразуйте группу «Icons» в компонент, потому что Figmotion не поддерживает группы:

№3

  1. Откройте плагин Figmotion. Мы собираемся создать 3 состояния: 0 мс (A), 300 мс (B), 700 мс (C). Сначала мы изменим положение компонента «Icons» по осям X и Y:
  • Нам нужно изменить положение X и Y (чтобы показать пользователям, что этот компонент перемещается): A: X=210 / Y=69 B: X=210 / Y= 69 C: X=190 / Y= 82
  • Также нам нужно изменить его непрозрачность, потому что иконки не видны в состояниях A и B: A: Непрозрачность = 0 B: Непрозрачность = 0 C: Непрозрачность = 1

№4

  1. Теперь нам нужно поработать над формой выпадающего меню и изменить его позицию X, а также ширину и высоту. Также нам нужно изменить непрозрачность формы выпадающего меню, поскольку оно не отображается в состояниях A и B:
  • Нам нужно изменить ширину и высоту слоя «Shape»: A: Ширина= 180 / Высота= 318 B: Ширина= 180 / Высота= 318 C: Ширина= 219 / Высота= 387
  • Кроме того, нам нужно изменить положение X слоя «Shape» (мы меняем его, потому что мы хотим, чтобы правая сторона осталась неизменной) A: X= 217 B: X= 217 C: X= 178
  • В качестве последнего изменения, мы поменяем непрозрачность слоя «Shape»: A: Непрозрачность= 0 B: Непрозрачность= 0 C: Непрозрачность= 1

№5

  1. В качестве упражнения воссоздайте поведение при нажатии на кнопку «More» (я уже объяснил последовательность действий выше).

Полученный результат должен выглядеть примерно так:

Я уменьшил скорость gif-файла, чтобы было лучше видно, как работает эта анимация (мы изменили ширину и высоту прямоугольника выпадающего меню и его позицию X. Также мы изменили положение X и Y иконок выпадающего меню)

Третья анимация: изображение

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

Мы собираемся воссоздать это

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

  1. Создайте новый артборд, назовите его «Images» и посмотрите на gif-файл ниже, чтобы добавить необходимые элементы для воссоздания страницы «Photos»:

№1

  1. Теперь нам нужно добавить элементы «Image Actions» и «Image Options», когда мы хотим полностью показать изображение:

№2 Добавление обязательных элементов

  1. Поскольку мы собираемся изменить каждый слой элементов «Image Actions» и «Image Options», отсоедините эти компоненты и переименуйте слои. Удалите слой прямоугольника из этих элементов, потому что он нам не нужен, а также удалите иконку «More» из элемента «Image Actions».

№3

  1. Теперь давайте изменим положение иконок «Back», «Up» и «Fav»:

№4

  1. Также нам нужно отсоединить элемент «Search Bar», потому что нам нужна иконка «More». Как вы можете заметить, нам нужно изменить цвет иконки «More» с серого на белый, когда пользователи нажимают на изображение.

№5

  1. Мы также должны отсоединить «Navigation Bar» и «Status bar», потому что позже хотим изменить цвет их иконок. Не забудьте переименовать слои, чтобы их было проще найти в Figmotion:

№6

  1. Наконец, мы также должны отсоединить элемент «Images», потому что первое изображение будет использовано позже для завершения этой анимации. Когда вы отключите этот элемент, вы увидите две группы: «August» и «July». Снова преобразуйте группу «July» в компонент, в противном случае ее элементы не будут видны в Figmotion:

№7

  1. Добавьте черный прямоугольник, который будет отображаться при нажатии на изображение. Установите его непрозрачность на «0%:

№8

  1. Теперь мы готовы открыть плагин Figmotion и воссоздать третью анимацию. Мы будем использовать три состояния для этих элементов:
  • Image: 0 мс (A), 300 мс (B) и 700 мс (C )
  • Status bar, Navigation bar, иконка «More», черный прямоугольник, Image actions и Image options: 0 мс (A), 300 мс (B), 500 мс (C )

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

№9 Это изображение бесполезно

  1. Теперь давайте откроем плагин Figmotion и изменим поведение «Image».

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 700 мс (C)

  • Размер: A :Ширина= 99 / Высота= 99 B: Ширина= 99 / Высота= 99 C: Ширина= 411 / Высота= 327
  • Позиция: A: Y= 163 B: Y= 163 C: Y= 248

№10

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

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

  • A: Непрозрачность= 0 B: Непрозрачность= 0 C: Непрозрачность= 1

№11

  1. На этом этапе мы собираемся изменить поведение элементов компонента «Image Actions»: «Back», «Favourite» и «Upload».

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

  • A: Непрозрачность= 0 B: Непрозрачность= 0 C: Непрозрачность= 1

№12

  1. Теперь мы хотим изменить поведение элементов «Navigation Bar», а также иконки «More».

Напомню, что их состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

  • Navigation Bar / Back A: Stroke Color = 0 B: Stroke Color = 0 C: Stroke Color = 1
  • Navigation Bar / Home A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
  • Иконка «More» A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1

№13

  1. В качестве последнего шага мы изменим цвет иконок строки состояния:

Напомню, что их состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

  • Status Bar / Time A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
  • Status Bar / Charge Percent A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
  • Status Bar / LTE A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
  • Status Bar / Network A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
  • Status Bar / Battery / Charge (это иконка) A: Fill Color = 0 B: Fill Color = 0 C: Fill Color = 1
  • Не меняйте Status Bar / Battery / Shape!

№14

  1. Мы кое-что забыли! Что? Нам нужно изменить непрозрачность иконок «Image Options».

Напомню, что их состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

  • Image Options / 1 A: Непрозрачность = 0 B: Непрозрачность = 0 C: Непрозрачность = 1
  • Image Options / 2 A: Непрозрачность = 0 B: Непрозрачность = 0 C: Непрозрачность = 1
  • Image Options / 3 A: Непрозрачность = 0 B: Непрозрачность = 0 C: Непрозрачность = 1
  • Image Options / 4 A: Непрозрачность = 0 B: Непрозрачность = 0 C: Непрозрачность = 1

№15 Я применил эти изменения к одной иконке, но вы должны сделать это и для других иконок Image Options

  1. Упражнение: Воссоздать поведение нажатия.

Отлично! Я ожидаю, что вы создали что-то вроде этого или даже лучше. Как вы можете заметить, мышь ведет себя не очень, но это не имеет большого значения! Давайте посмотрим на gif-файл ниже:

:)

Четвертая анимация: переключение между вкладками

Настало время самой сложной анимации! Давайте сначала посмотрим на анимацию ниже:

На первый взгляд, все выглядит очень просто, но заметили ли вы, как меняются иконки?

Позвольте мне объяснить, что мы собираемся сделать:

  • Изменить радиус краев прямоугольника, чтобы показать пользователям, что выбрана вкладка «Albums».
  • Изменить стиль иконки «Photos», поэтому я воссоздам эту иконку.
  • Изменить стиль иконки «Albums», поэтому я воссоздам эту иконку.
  • Показать содержимое вкладки «Albums»
  1. Давайте воссоздадим это вместе, создав новый артборд и добавив необходимые элементы:

№1

  1. Поскольку нам нужно показать вкладку «Albums», необходимо добавить компонент «Albums»:

№2

  1. Расположите слои, как на картинке ниже:

№3

  1. Отсоедините элемент «Bottom Bar» и создайте отдельную группу для каждой иконки:

№4

  1. Теперь нам нужно воссоздать иконку вкладки «Photos»:

№5 Не бойтесь создать новую иконку или воссоздать то, что уже создано!

  1. Мы должны изменить название слоев вкладки «Photos», как показано ниже:
  • Mountain → Photos / Mountain
  • Square → Photos / Shape
  • Также сделайте копию слоя «Photos / Shape» и измените его имя на: «Photos / Shape / Back». Нам нужно применить следующие изменения к этому слою: удалить «Fill», добавить внутреннюю границу (Inside Border / Размер: 2 / Цвет: #767676). Он должен быть ниже, чем слой «Photos / Shape».

Почему мы сделали копию слоя «Photos / Shape»? Мы узнаем это, когда он исчезнет.

№6

  1. Воссоздание «Albums» будет довольно сложным, но, как я уже говорил, не бойтесь этого! Мы попытаемся создать иконку книги.
  • Первый шаг: создайте квадрат и попробуйте разместить его на квадрате основной иконки.
  • Второй шаг: создайте вектор, подобный тому, как на gif-файл ниже, и измените радиус его основного угла на 2.

№7–1 и 2

  • Третий шаг: измените цвет обводки квадрата на # 767676 (Удалите опцию «Fill» / размер обводки = 2) и измените векторную обводку на #767676.

№7–3

  • Четвертый шаг: создайте еще один вектор, как на gif-файле ниже, и залейте его следующим цветом: # 767676.

№7–4

  • Пятый шаг: переименуйте квадрат и векторы: Square → Albums / Shape First vector → Albums / Line Second vector → Albums / Complete

Шестой шаг: сделайте копию «Albums / Shape», удалите опцию «Stroke» и отметьте опцию «Fill». Залейте фигуру этим цветом: #1D6DDF и установите его непрозрачность по умолчанию 0%.

Также измените его имя на «Albums / Shape / Back» (когда «Albums / Shape» исчезнут, мы покажем его):

№7– 5 и 6

  • Седьмой шаг: измените порядок «Albums / Shape», «Albums / Line», «Albums / Shape/ Back» и «Albums / Complete», как показано на рисунке ниже:

№7–7

  1. Создайте новый прямоугольник (взгляните на основную анимацию, чтобы понять, почему мы хотим добавить прямоугольник на нижнюю панель!) И измените его имя на «Rectangle / Tap». Его положение в окне «Layers» должно быть ниже, чем иконки, которые мы создали ранее, и их метки:
  • Заливка: #1D6DDF Непрозрачночть: #10 Радиус: 40

№8

  1. Откройте Figmotion и давайте воссоздадим последнее микровзаимодействие. Нам нужно использовать три состояния:
  • Элемент «Albums»: 0 мс (A), 700 мс (B), 900 мс (C)
  • Другие элементы и слои: 0 мс (A), 300 мс (B), 700 мс (C)

Почему? Потому что элемент «Albums» появляется после того, как пользователь нажал на вкладку «Albums», а элемент «Images» исчез.

Сначала мы воссоздадим анимацию исчезновения элемента «Images»:

Напоминаю, его состояния составляют: 0 мс (A), 300 мс (B) и 700 мс (C)

  • Компонент «Images»: Состояние A: Непрозрачность = 0 Состояние B: Непрозрачность = 0 Состояние C: Непрозрачность = 1

№9

  1. На этом этапе пришло время поменять эффект изменения стиля иконки вкладки «Photos»:

Напомню, что его состояния равны 0 мс (A), 300 мс (B) и 700 мс (C)

  • Photos / Shape: мы изменим его непрозрачность со 100% до 0%. Состояние A: Непрозрачность = 1 Состояние B: Непрозрачность = 1 Состояние C: Непрозрачность = 0
  • Photos / Mountain: нам нужно изменить цвет с #FFFFFF на #272727. Состояние A: Цвет заливки= #FFFFFF Состояние B: Цвет заливки = #FFFFFF Состояние C: Цвет заливки = #272727
  • Photos (Text): нам нужно изменить его цвет с #1D6DDF на #272727. Состояние A: Цвет заливки = #1D6DDF Состояние B: Цвет заливки = #1D6DDF Состояние C: Цвет заливки = #272727
  • Не изменяйте непрозрачность «Photos / Shape / Back», его непрозрачность всегда должна быть 1.

№10

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

Его состояния: 0 мс (A), 300 мс (B), 700 мс (C) и 900 мс (D).

  • Прямоугольник / Tap: мы собираемся изменить радиус его непрозрачности с 0% до 10% (состояние B -> состояние C), а затем изменим его на 0%, чтобы скрыть этот прямоугольник (состояние C -> состояние D). Состояние A: Непрозрачность = 0 Состояние B: Непрозрачность = 0 Состояние C: Непрозрачность = 0.10 Состояние D: Непрозрачность = 0
  • Прямоугольник / Tap: также мы должны изменить радиус его углов с 40 на 0. Состояние A: Border radius = 40 Состояние B: Border radius = 40 Состояние C: Border radius = 0

Мы не будем изменять радиус границы углов этого прямоугольника в последнем состоянии (900 мс).

№11

  1. На этом этапе пришло время поменять эффект изменения стиля иконки вкладки «Albums»:

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 700 мс (C)

  • Albums (метка): нам нужно изменить ее цвет с #272727 на #1D6DDF

    Состояние A: Цвет заливки= #272727

    Состояние B: Цвет заливки= #272727

    Состояние C: Цвет заливки= #1D6DDF

  • Albums / Shape:

    Состояние A: Непрозрачность= 1

    Состояние B: Непрозрачность= 1

    Состояние C: Непрозрачность= 0

  • Albums / Shape / Back:

    Состояние A: Непрозрачность= 1

    Состояние B: Непрозрачность= 1

    Состояние C: Непрозрачность= 0

  • Albums / Line:

    Состояние A: Stroke Color = #272727

    Состояние B: Stroke Color = #272727

    Состояние C: Stroke Color = #1D6DDF

  • Albums / Complete:

    Состояние A: Цвет заливки = #272727

    Состояние B: Цвет заливки = #272727

    Состояние C: Цвет заливки = #FFFFFF

№12

  1. Это последний шаг, прежде чем я дам вам упражнение! Снова взгляните на основной gif-файл, который использовался для воссоздания его микровзаимодействия. Вы могли заметить, что компонент «Albums» перемещается немного вверх, а затем появляется. Итак, нам нужно изменить его позицию Y, а также его непрозрачность:

Напомню, что его состояния: 0 мс (A), 700 мс (B) и 900 мс (C)

  • Albums (компонент, который был добавлен на артборд на втором шаге): как я уже говорил, нам нужно изменить его позицию Y. Состояние A: Y= 155 Состояние B: Y= 155 Состояние C: Y= 140
  • Также нам нужно изменить его непрозрачность: Состояние A: Непрозрачность= 0 Состояние B: Непрозрачность= 0 Состояние C: Непрозрачность= 1

№13

  1. В качестве упражнения создайте круг и смоделируйте поведение нажатия (я имею в виду создайте круг, переместите его, а затем измените его размер, чтобы имитировать поведение нажатия).

Теперь мы создали эту анимацию:

Хорошая работа! :)

Вы узнали, как создавать наиболее полезные микровзаимодействия ОС Android. Я надеюсь, что в качестве упражнения вы воссоздадите еще больше микровзаимодействий приложения Google Фото, чтобы лучше усвоить эту статью.

Если вы узнали что-то новое и считаете статью полезной, ставьте лайк, и поделитесь ею с коллегами. :)

Аккаунт автора статьи на Dribbble: https://dribbble.com/Em-designer

Портфолио автора: https://mojahanii.wixsite.com/jahanii


Перевод статьи Em Design

Топ коментарі (1)

Згорнути/розгорнути
 
smile profile image
Mr Smile

непогана альтернатива для анімацій у фігмі, яка розвивається більш швидкими темпами - плагін Figma Motion