Мой первый анимированный персонаж, Workpop. После того, как я запостил свой первый анимированный персонаж на Dribbble, несколько пользователей поинтересовались, как я использовал Principle для создания анимации. Если вы еще незнакомы с Principle, это простой способ создавать анимированные, интерактивные дизайны пользовательских интерфейсов; как оказалось, с его помощью можно легко анимировать почти что угодно (не только интерфейсы).
Ваша первая анимация персонажа
Мы создадим этот дружелюбный шарик Сначала нужно создать векторный персонаж в Sketch. Вы можете использовать мой готовый пример (вместе с примером principle) - скачайте исходники здесь. Как только персонаж нарисован (я использую Sketch), убедитесь, что вы сгруппировали все объекты вместе, чтобы можно было легко передвигать их в Principle (вы можете также сгруппировать их в Principle, это на ваш выбор). В этом примере я сгруппировал левую/правую руку, левую/правую ногу, тело, тень на земле и флаг. Мы переместим эти объекты в Principle, чтобы создать нашу анимацию. 
Группировка слоев в Sketch Когда вы нарисовали и сгруппировали свой персонаж в Sketch, откройте Principle и выберите “Import”. Артборд персонажа проимпортируется в Sketch. После импорта у вас будет новый артборд внутри Principle. 
Наш импортированный персонаж из Sketch Выделите артборд и продублируйте 4 раза. Соедините каждый артборд со следующим, а последний с первым, используя “Auto”. Это как раз и сгенерирует анимацию. Каждый слой на каждом артборде будет анимироваться со слоем с таким же названием в следующем артборде. 
Присоедините каждый артборд к следующему Когда все артборды соединены, выделите руки, ноги, туловище и другие сгруппированные элементы, которые вы бы хотели изменить на артбордах 2 и 4. В примере ниже вы увидите, что 1-й и 3-й артборды одинаковы, а в 1-м и 4-м артборде положения объектов немного отличаются. Это создает бесшовную петлю анимации. Вы бы могли при желании сделать всего 2 артборда, это был бы еще более простой вариант, но мы не ищем легких путей : ) 
Анимация в конечном виде Вот и все, теперь давайте запишем анимацию.
Запись анимации
В Principle есть встроенный инструмент для записи. Однако при предварительном просмотре, анимация зацикливается. К сожалению, в Principle не предусмотрено простого способа для запуска и остановки анимации в нужный момент времени. Поэтому довольно сложно записать идеально цикличную анимацию. Но я нашел решение. Я записываю один полный цикл анимации в GIF, затем импортирую gif-ку в Photoshop (или любой другой gif-редактор) и удаляю кадры так, что последний становится равен первому. Пересохраняем gif и у вас отличная “цикл”! 
Что дальше?
Это пример простой и быстрой анимации. Я уверен, что добавление большего количества кадров, а также аккуратное передвижение и выравнивание частей персонажа, может действительно оживить персонаж лучше. Principle предлагает массу опций для анимирования, и в этом посте я описал самые базовые возможности. Если вы создадите своих собственных персонажей, делитесь ими в комментариях - очень интересно посмотреть на результат.
Перевод статьи Seth Sandler
Топ коментарі (0)