Як просто і швидко анімувати персонаж в principle

Мій перший анімований персонаж, 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 артборда, це був би ще більш простий варіант, але ми не шукаємо легких шляхів 🙂 Анімація в кінцевому вигляді Ось і все, тепер давайте запишемо анімацію.

запис анімації

Що далі?