Не Гаррі Поттер, а моушн-дизайнер. Як за допомогою Rive створити магію в анімації
Режим читання збільшує текст, прибирає все зайве зі сторінки та дає можливість зосередитися на матеріалі. Тут ви можете вимкнути його в будь-який момент.
Створювати анімації для освітнього застосунку, яким користуються мільйони людей у світі — ще той виклик. Анімації можуть або покращити досвід користувача, або з першої секунди зруйнувати його. Саме тому моушн-дизайнер «сушить» голову над кожним рухом анімованого елемента, аби втримати баланс між креативністю, ефективністю та користю.
У повсякденній роботі я постійно використовую After Effects, він чудово підходить для Lottie- анімації Легка масштабована анімація для вебсайтів і мобільних застосунків. . Але до нього звертаюсь усе рідше, бо нещодавно абсолютно випадково надибав потужний Rive. З цим софтом для мене відкрилася магія простого та захопливого процесу анімацій. У цьому матеріалі розкажу про «фішки» інструменту та як з його допомогою прокачав підхід до створення анімацій для освітнього застосунку Nibble.
Знайомство з Rive
Про Rive я дізнався, коли на теренах інтернету натрапив на кейс Duolingo. Так для мене відкрився цілий всесвіт із нескінченними можливостями створення інтерактивності, потужним креативом, легкістю імплементації та простим інтерфейсом.
Головна перевага Rive — це швидке створення крутих анімацій для застосунків, сайтів та ігор. Він також дозволяє робити анімовані навчальні посібники, візуально відтворювати мікровзаємодії, як-от завантаження, індикатори прогресу тощо.
Для всіх цих задач інструмент має величезну бібліотеку елементів, а також надає зручний та зрозумілий редактор для створення анімацій з нуля. При цьому софт працює на різних платформах і пристроях та дозволяє легко взаємодіяти у командній роботі.
Оскільки інструмент новий, в ньому все іще є чимало обмежень, але його переваги з лишком перекривають будь-які мінуси. Після кількох місяців активного тестингу я виділів для себе п’ять «фішок», за які щиро люблю використовувати цей софт.
- Більша кількість механік для створення послідовних анімацій. З Rive можна експериментувати, пропонувати різні формати взаємодій, ще більш продумано пояснювати складні речі.
- Самостійність та незалежність. Для роботи з анімаціями у софті нам потрібна лише Figma та власне сам Rive. У той час як з Lottie для роботи потрібна купа додаткових інструментів, як-от After Effects з плагіном LottieFiles, а також плагін AEUX для After Effects (робота з цим плагіном — ще той челендж) та Figma для експорту ілюстрації.
- Простий і зрозумілий інтерфейс, завдяки якому суттєво скорочується час створення анімації без втрати часу. Це такий собі мікс Figma After Effects, де все виглядає знайомим та інтуїтивно зрозумілим.
- Простий та швидкий експорт у застосунок.
- Легше працювати в команді. Щоб показати колегам попередній результат, достатньо згенерувати посилання і скопіювати у чат. При цьому переглядати напрацювання можна навіть не маючи зареєстрованого акаунту в Rive.
Як Rive змінив підхід до створення анімацій для інтерактивних уроків
Але повернімося до того, чому я взагалі почав шукати щось краще, ніж After Effects. Все почалося з того, як в Headway ми запустили Nibble — застосунок із короткими інтерактивними уроками на різноманітні теми: від математики до мистецтва.
Ми спираємося на гіпотезу, що фокус уваги людини сьогодні максимально короткий. Тож, щоб втримати його, а ще й витягнути користувачів з дофамінової ями скролінгу, нам потрібно щось неймовірне, продумане, креативне. У нас цей процес залучення-утримання-захоплення здебільшого тримається на візуальній складовій та анімаціях. Їхньому створенню ми приділяємо левову частку наших зусиль та постійно шукаємо нові інструменти для вдосконалення процесу. Так я і прийшов до Rive.
Розкажу про можливості з Rive на прикладі одного з наших уроків Trutth-Tellers&Liers з курсу логіки, де ми спонукаємо користувачів використовувати мислення та ідентифікувати, хто говорить правду, а хто бреше.
Завдяки Rive ми можемо анімувати паралельно декілька сцен, нашаровувати таймлайни й змінювати їх залежно від дій користувача.
У наступних прикладах анімовані персонажі кліпають і переглядаються між собою, а коли юзер обирає варіант, вони підбадьорюють за правильну відповідь, чи навпаки дають зрозуміти, що відгадка була неправильною.
Усі ці нюанси можна відтворити безпосередньо у Rive, а отже непотрібно додатково залучати розробників.
І це я використовую лише відсотків 30 потенціалу Rive. Але вже на цьому етапі вдалось збільшити кількість механік для створення послідовних анімацій з 5 до 30+. Зараз я найбільше застосовую інпут Trigger, який дозволяє змінювати анімацію з кліком на обʼєкт. Але ще два інпути мені тільки належить дослідити: це Boolean, в якому керування анімацією відбувається через чекбокси (ідеально для різноманітних перемикачів) та Number, де анімація змінюється за допомогою введення числових значень.
Проте навіть третина потенціалу Rive дає великий простір для експериментів та створення різних механік. Зараз я активно тестую інші можливості софту. Наші розробники наразі працюють над функціональністю drag and drop, яка ще й полегшить сприйняття анімації для користувачів. Що більше ми тестуємо Rive та нові інструменти, то цікавішими стають уроки Nibble. А від візуально продуманого освітнього контенту дійсно складно відірватися.
Rive буде цікавим і корисним моушн та продуктовим дизайнерам, які працюють з інтерактивним контентом. Освоїти цей інструмент не буде складно, адже він певний симбіоз між Figma та After Effects. Зрозуміти побудову State Machine допоможуть навчальні відео від розробників на офіційному сайті.
Більше про це
Комунікувати зумерам на їхній території. Як та навіщо створили Майдан Незалежності у Fortnite — кейс
Будь-яку статтю можна зберегти в закладки на сайті, щоб прочитати її пізніше.
Партнерські матеріали
