Собрал презентацию на Беханс с помощью Rive и божьей помощью для коллабы с курса Вольницы.

Стояла задача сделать бесшовное полотно, что усложнило реализацию с моей идеей добавить интерактива. Изначально хотел всё полностью собрать в Rive, но возникли сложности.

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

Спасибо Вольнице и Андрею, что пошли на такой эксперимент. Коллаба это пространство для экспериментов – сказал Андрей)
Некоторые блоки не вошли – пришлось переверстать и пересобрать из-за ошибок воспроизведения и прочих проблем беханса, оптимизации и работы в мобильной браузерной версии. Их выложу отдельно. Подробнее о каждом аспекте расскажу в отельных постах.

По обучению райву выполнил много целей:
– Анимация текста
– Взаимодействие с сиквенциями (которые пришлось заменить на простые гифки)
– Реюз ассетов
– Просто фан, потому что иначе был бы ужас)
– Поработал с HUD
– Понял проблемы и ограничения Behance при работе с интерактивом. Побился головой о все подводные камни

Посмотреть мои изыскания по ссылочке: https://www.behance.net/gallery/211521203/BLNDR-COLLAB

Рост органики в Rive

Сегодня увидел на канале «Оно и видно» тутор Алексея о росте дерева в Ае. В видео прочувствовал ту боль анимации path в Ае. Поэтому повторил в RIVE анимацию прорастания на водорослях и сравнил процессы в 2-х программах. По сути, иллюстрация и техника схожи, а для теста сделал анимацию каждого элемента намеренно явной.

Перед анимацией заригал пасы на кости и сделал развесовку. Главное преимущество этого способа: индивидуальный контроль над каждой веточкой. Можно заоффсетить все параметры и изменять значения каждого элемента. Второе преимущество: скейл и ротейшен управляют позицией точек и тангентов паса, поэтому обводка сохраняется одного размера и которую не нужно подгонять. Можно сделать анимацию руками, без костей. В этом случае тоже получится сделать оффсеты, так как райв позволяет контролировать каждую точку паса и тангент отдельно.

Изначально делал анимацию стикерного формата: цикл до 3 секунд. Но поскольку райв программа для интерактива, сделал проявление и уход анимации на вход-выход курсора мыши.

В риге я не учел, что буду делать интерактив. В Idle хотелось заанимировать каждую ветку отдельно, но ключи на костях стояли в анимациях «IN» и «OUT». Можно сделать idle анимацию на тех же костях и поставить её между «IN» и «OUT», но тогда она получалась не такая бесшовная.

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

Нужно всё пересобирать, но было лень. Поэтому я забил и сделал общий скейл и ротейшен на каждый водоросль и заоффсетил их. Получилось неплохо + оптимизация, так как меньше ключей. Только пришлось подогнать ключи по ротейшену у Root костей каждого водоросля.

Процесс анимации мне понравился, хоть и налажал с ригом. Анимация проявления делается в 2 ключа: скейл 0-100, ротейшен 10-0. И всё заоффсетить. Можно добавить баунс на ключи для эластичности и красоты. Минусы анимации такие: нет скриптов и приходится делать очень много работы руками: оффсеты, реверсы ключей и т.д.

Интерактивный walk cycle в Rive

Цикл ходьбы – база, которую делают аниматоры. Почему не сделать ее интерактивной? Я сделал, можно потыкать.

Для практики взял голубя из проекта. Закрепил механику работы визуальных слайдеров, отработал риггинг в райве, прокачал морфинги положений и морфинги анимаций. Делал по мотивам урока №12 курса от MDS.

Где научиться делать интерактивные походки?
Собрал уроки:
• По риггингу и подготовке перса на канале MDS. Полный урок в платном курсе. Урок и курс хардкорные, без подготовки будет сложно
• По походке на канале райва. Полезный урок для новичков в райве
• По интерактивному слайдеру на канале райва. Простой урок по морфингу 2-х анимаций с помощью слайдера
• По запросу rive walk cycle на ютубе, все результаты поиска с официального канала райва
• Проекты походок разного уровня качества можно посмотреть в комьюнити райва

Гайдлайн дропбокса в RIVE

У Дропбокса вышел новый гайдлайн с кучей крутых анимашек и взаимодействий. Из них я насчитал 9 райв анимаций и несколько lottie. Более сложные взаимодействия делали инструментами Webflow или кодом – тут только угадать. Я решил повторить некоторые интерактивные анимации инструментами райва. Дизайн накидал примерный, потому что мне важнее было воссоздать взаимодействия и анимацию, используя только райв, чтоб понять его возможности и ограничения.

Начальная секция в блоке про цвет
В этой секции красиво рисуются линии, проявляются блоки. Из интерактива: смена цветов пипеточкой. Проявление заанимировать не слишком сложно, а для смены цветов, как в оригинале, пришлось напрячь стейт машину. Дальше скролимся ко второй секции.

Вторая секция, где текст заполняется во время скролла
Тут подход более комплексный. Я простроил базу страницы из лейаутов и добавил скроллбар. Для заполнения текста использовал джойстик, который привязал к положению скроллбара и подогнал его в нужное положение. Использовал Distance Constraint, чтобы зафиксировать текст на месте во время скролла – костыль, но сработало. Смену цветов во время скролла не получилось сделать, как в оригинале, но и так сойдет)

По итогу
В райве можно создавать интерактивные прототипы, хоть иногда для результата приходится делать много ручной работы и сетапить на костылях. А Дропбокс показал, что можно использовать райв в гайдлайнах – это точно нужно взять на заметку. Пока в райве сделали простые блоки, но их сделали в райве) В следующих постах повторю другие анимации из гайдов Дропбокса.

Потрогать и посмотреть, как сделал можно в коммьюнити райва
Статья на сайте Rive про интерактив в гайдах Дропбокса

Рандомные иконки, как у дропбокса

Продолжаю повторять интерактивные анимации из гайда дропбокса в райве. Сделал сетап для рандомного барабана иконок из блока про иконки. Потрогать можно в комьюнити райва.

А можно посмотреть с моими комментариями. Записал разбор проекта в очень спокойном и расслабленном лайв формате аж на 20 минут. Показал пару интересных приемов с рандомностью и что-то еще. Лучше смотреть на скорости 2-2.5, чтоб не уснуть. Видос приложил в комменты.

Размер финального файла с запеченным текстом, без шрифта в ассетах – 59 Кб. Без запекания, со шрифтом в ассетах – 106 Кб. Наверное это круто для интерактивного файла с кучей интеракций) Оригинальный RIV файл с сайта дропбокса весит 266 Кб, со шрифтом наверно.

В статье на сайте райва можно почитать умные мысли про то, что «интерактивный брендинг — это будущее» и «статичные гайдлайны — это прошлый век». А еще, что «это не показуха ради показухи, и каждое движение ощущается преднамеренным». Пора готовиться разрабатывать интерактивные анимации в гайды РФ компаний?

В следующих выпусках повторю другие интерактивные анимашки из гайдов дропбокса.

Экспрешены в райве

Сегодня райв релизнули отдельное приложение “Early Access”. Это демо версия, где будут тестироваться новые фичи, перед выпуском в основной версии. Доступно только для платных пользователей с подпиской Voyager или Enterprise.

Сейчас там одна новая, но гейм-ченжинг фича – дата. С помощью нее можно связывать элементы в редакторе, дату и код. То есть это инструмент, с помощью которого можно более гибко редактировать данные внутри графического редактора и отдавать это в разработку. Если раньше для условного счетчика приходилось создавать таймлайн для каждого числа, то сейчас просто привязываем текст к числовому значению.

Подробнее про эту фичу можно почитать в доках райва. Дополнительно есть видео с пояснениями в этих доках или на ютуб канале райва, где рассказали базовую информацию о функции: что, где и как ее можно применять. Например, можно выбирать персонажей, менять данные в таблицах, более тонко настраивать условия перехода из одного состояния в другое и все остальное)

Я тоже потестил эту фичу. Для этого взял верстку дорожной карты курсов Вольницы и привязал разные значения к параметрам. Подробнее в приложенном видео.

Райв продолжает развиваться и выделяться на фоне конкурентов. Ждем туторы от их команды и проекты в комьюнити, чтоб лучше разобраться в теме