Как просто и быстро анимировать персонаж в Principle

Как просто и быстро анимировать персонаж в Principle

Мой первый анимированный персонаж, Workpop.

После того, как я запостил свой первый анимированный персонаж на Dribbble, несколько пользователей поинтересовались, как я использовал Principle для создания анимации. Если вы еще незнакомы с Principle, это простой способ создавать анимированные, интерактивные дизайны пользовательских интерфейсов; как оказалось, с его помощью можно легко анимировать почти что угодно (не только интерфейсы).

Ваша первая анимация персонажа

дружелюбный шарик
Мы создадим этот дружелюбный шарик

Сначала нужно создать векторный персонаж в Sketch. Вы можете использовать мой готовый пример (вместе с примером principle) – скачайте исходники здесь.

Как только персонаж нарисован (я использую Sketch), убедитесь, что вы сгруппировали все объекты вместе, чтобы можно было легко передвигать их в Principle (вы можете также сгруппировать их в Principle, это на ваш выбор). В этом примере я сгруппировал левую/правую руку, левую/правую ногу, тело, тень на земле и флаг. Мы переместим эти объекты в Principle, чтобы создать нашу анимацию.

Профессия «Дизайнер интерактивных медиа»
Профессия «Дизайнер интерактивных медиа»
Скидка 45% по промокоду UXPUB
Узнать подробнее
Группировка слоев в Sketch
Группировка слоев в Sketch

Когда вы нарисовали и сгруппировали свой персонаж в Sketch, откройте Principle и выберите “Import”. Артборд персонажа проимпортируется в Sketch. После импорта у вас будет новый артборд внутри Principle.

персонаж из Sketch
Наш импортированный персонаж из Sketch

Выделите артборд и продублируйте 4 раза. Соедините каждый артборд со следующим, а последний с первым, используя “Auto”. Это как раз и сгенерирует анимацию. Каждый слой на каждом артборде будет анимироваться со слоем с таким же названием в следующем артборде.

Присоедините каждый артборд к следующему в Principle
Присоедините каждый артборд к следующему

Когда все артборды соединены, выделите руки, ноги, туловище и другие сгруппированные элементы, которые вы бы хотели изменить на артбордах 2 и 4. В примере ниже вы увидите, что 1-й и 3-й артборды одинаковы, а в 1-м и 4-м артборде положения объектов немного отличаются. Это создает бесшовную петлю анимации. Вы бы могли при желании сделать всего 2 артборда, это был бы еще более простой вариант, но мы не ищем легких путей : )

Анимация в конечном виде Principle
Анимация в конечном виде

Вот и все, теперь давайте запишем анимацию.

Запись анимации

В Principle есть встроенный инструмент для записи. Однако при предварительном просмотре, анимация зацикливается. К сожалению, в Principle не предусмотрено простого способа для запуска и остановки анимации в нужный момент времени. Поэтому довольно сложно записать идеально цикличную анимацию. Но я нашел решение. Я записываю один полный цикл анимации в GIF, затем импортирую gif-ку в Photoshop (или любой другой gif-редактор) и удаляю кадры так, что последний становится равен первому. Пересохраняем gif и у вас отличная “цикл”!

1-jB99yg3TxbzQJ-EUbJWfyA (1)

Что дальше?

Это пример простой и быстрой анимации. Я уверен, что добавление большего количества кадров, а также аккуратное передвижение и выравнивание частей персонажа, может действительно оживить персонаж лучше. Principle предлагает массу опций для анимирования, и в этом посте я описал самые базовые возможности. Если вы создадите своих собственных персонажей, делитесь ими в комментариях – очень интересно посмотреть на результат.

Total
0
Shares
3 комментария
  1. Principle версия 1.2.4 (46) на данный момент последняя, не сохраняются гиф анимации. Записываешь, указываешь куда сохранить, а файл не появляется. MOV сохраняется просто черным видео. Если знаете, как побороть проблему, напишите пожалуйста тут!

    1. Проверил только что на версии Version 1.2.4 (46) – все отлично работает, попробуйте удалить полностью приложение с помощью CleanMyMac или другой похожей проги и заново установить. Не забудьте перезагрузить компьютер, может поможет.

Добавить комментарий

Ваш адрес email не будет опубликован.

Похожие статьи
Релиз альфа-версии C4 Studio, новый инструмент для прототипирования
Подробнее

Релиз альфа-версии C4 Studio, новый инструмент для прототипирования

C4 Studio это новый класс в дизайне для мобильных устройств. Разработан для дизайнеров и разработчиков, C4 Studio позволяет запросто анимировать дизайн и генерировать готовый код для разработчика.
Модуль ViewController для Framer.js
Подробнее

Модуль ViewController для Framer.js

Модуль ViewController для Framer.js помогает вам создавать мультишаговые сценарии пользователя с готовыми переходами вроде затемнения (fade in), увеличения (zoom in) и листания (slide in). Он состоит из модуля Framer и опционального плагина для Sketch. На Medium есть статья-интро.
Подробнее

Прототипирования кругового индикатора загрузки в Principle

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

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
0
Share