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

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

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

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

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

Группировка слоев в 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 предлагает массу опций для анимирования, и в этом посте я описал самые базовые возможности. Если вы создадите своих собственных персонажей, делитесь ими в комментариях — очень интересно посмотреть на результат.