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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Живая анимация в райве
Что подразумеваю под “живой” анимацией? Это когда объект ведет себя вне рамок своего цикла. Анимирован не линейно, не ограничен несколькими секундами цикла. В играх или приложениях каждый раз запускаются одни и те же циклы анимации. В райве можно их разнообразить:
1. Миксовать анимации. Например, скорость ходьбы или амплитуда дыхания;
2. Анимировать несколько уровней параметров, когда одна группа отвечает за луп анимацию, а другая за общую и потом их миксовать;
3. Переключаться между несколькими анимационными состояниями;
4. Рандомно переключаться между состояниями/анимациями;
5. Добавлять вторичное действие, типа моргания, движения лица и тд.

Такой подход хорошо реализуют дуолинго. Например, созвон с Лили, где у персонажа есть несколько заготовленных анимаций на каждую ситуацию, которые рандомно запускаются и создают ощущение жизни. Или персонажи во время подкастов живут своей жизнью и реагируют на ответы пользователя. Аналогично с персонажами в основных уроках.

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

В следующем посте покажу что и как можно создвать в райве.

Как жизнь реализовывается в райве? Подход первый: микс таймлайнов.

Первый подход это создать основной цикл анимации и подмешивать к нему дополнительную анимацию. Например, персонаж стоит в idle позе и время от времени может моргать в рандомный момент или реагировать на курсор пользователя. Еще пример: персонаж идет в цикле на одном слое стейт машины, а на другом к нему подмешивается анимация поворота головы и подмигивания. Поворот и подмигивание можно сделать при триггере – получаем управляемый секондари экшон.

Хороший пример перса из комьюнити. В нем на отдельных таймлайнах и слоях: дыхание, моргание и волосы. Дополнительно перс следит за курсором.

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

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

Как пример абстрактного, я сделал магическую сферу, где каждый внутренний элемент двигается в своем цикле со своей скоростью и при миксе анимация получается рандомнее и интереснее. Посмотреть можно в маркетплейсе райва. Сюда же можно добавить рандомный старт объектов, чтоб начало анимации с каждым запуском было разным.

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

Собрал туторы для самостоятельного изучения
База из Rive 101
База по блендингу таймлайнов от Джейка
Анимация и стейт машина интерактивного перса

Миксом таймлайнов можно получить интересный результат. Но лучше всего он будет работать с другими инструментами «живости», которые я уже упоминал и о которых подробнее расскажу в следующих постах.

Жизнь в райве. Подход второй: рандомность

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

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

Технику рандомности можно использовать не только для анимаций слотовых крутилок для казино, но и в персонажной, и в интерфейсной анимации. В дропбоксе реализовали рандомную крутилку лого при наведении – писал об этом ранее, даже проект есть в комьюнити.

В посте выше упоминал моргание в рандомный момент. Можно сделать несколько анимаций моргания и несколько состояний не моргания разной длительности. Подробнее в видео…

В посте про микс таймлайнов писал про рандомное положение при каждом запуске. Чтобы анимация каждый раз не стартовала с одного положения можно эти положения зарандомить. Делаем 3 артборда с разными положениями по какому-то параметру. В случае с магическим шаром можно сделать несколько вариаций у ротейшенов и через any state при каждом запуске будет разный магический шар. Так можно каждый раз запускать анимацию персонажа разным образом.

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

Еще вариант, который может подойти к пропсам, внешнему виду перса: entry и any state подключены к нескольким таймлайнам с рандомностью. Так при каждом запуске стейт машины у нас будет рандомный лук, который можно менять рандомным способом.
Классный пример такого сетапа
И еще пример рандомного вида персонажа при клике


Тутор по рандому в райве

Интересные файлики из маркетплейса:
Игра в камень ножницы бумага
Рандомные числа

Поучаствовал в моушн-челлендже, который организовал Лёша Гончаров

Нужно было анимировать иллюстрацию от David Mascha. Я конечно же делал в райве)

Про интерактив. Можно растребушить линии с помощью курсора или пальца. Можно тыкнуть и начнется небольшое безумие, которое требушить интереснее. В обратное состояние в этом сетапе вернуть не получилось(

Про сетап. Собирал финальную композицию с помощью новой фичи от райва, которая называется «Lists» или по-русски «списки». Фича в основном для создания менюшек для интерфейсов, но можно решать и другие задачи. В своей задаче я с помощью него продублировал линии и сделал оффсеты на анимацию. Сейчас эта фича работает немного багованно: у меня было 60 копий и случается пропуск одной копии в анимации, из-за чего перфекционисты могут пострадать. Также финальный вид не увидишь пока не запустишь стейт машину, но в версии раннего доступа посмотреть можно, так что ждем обновления райва.

Покрасил обычным линейным градиентом, эффект объема сделал векторным размытием с режимом наложения.Использовать можно один ч/б цвет в режиме наложения: например, color dodge или color burn. Райв ограничен в инструментах композитинга, но и этими инструментами можно решать задачи.

Посмотреть и потыкать мой проект можно в комьюнити райва
Тут как раз видно косяки Lists, которые не удалось побороть, хотя в редакторе работает +- норм.

Где изучить Lists?
Тутор про анимацию секвенций, когда нужно запустить одну анимацию за другой с задержкой. Для копий и оффсетов использовал эту технику
Тутор из 101. Тут самая база про списки
Тутор как использовать для циферблатов
И еще несколько туториалов можно найти на канале Rive

N-Slicing в райве

N-Slicing — фича, которая режет изображение на части и позволяет масштабировать его без искажений и потери качества. Идеально для адаптивных кнопок, модалок, панелей, игровых фонов — везде, где нужно сохранить детали при масштабировании.

Фича основана на технологии 9-slicing, которая применяется в гейм-дизайне.Изображение делится на 9 частей: 4 зафиксированных угла и 5 динамических частей.

В райве сделали вместо 9 базовых слайсов любое количество: N-Slicing, где N – количество слайсов. И слайсинг работает в экосистеме райва с его фичами: лейаутами, датой и библиотеками – реальная имба!)

Слайсы для вектора и растра различаются. У растра можно выбрать режим масштабирования сегмента: Stretch, Tile, Hidden – растягивает, тайлит или скрывает сегмент. У вектора только растяжение — Rive автоматически рассчитывает деформацию, как будто шейп привязан к костям. Только на костях это будет сделать оч геморно и долго, да и не нужно.

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

А еще я записываю видео обзор с примерами слайсинга. Там на нескольких простых примерах покажу, где можно его применять)

N-slicing примеры

Провел ресерч, как работает N-Slicing и где его можно применить. А потом записал видео, где разбираю простые примеры применения: локации, объекты, плашки, текст. Можно посмотреть в прикрепленном видео или версию на ютубе

На маркетплейс выложил файл, где собрал все примеры, которые показывал в видео. И все текстовые перебивки тоже там)

Пишите в комменты, если есть, что добавить или где еще можно применить слайсинг

Скриптинг в RIVE

В ранний доступ завезли скриптинг и AI агента, который будет помогать дизайнерам генрить код. Теперь можно прямо кодом прописывать анимацию и логику. И работает это с остальными райв инструментами

В демке показали много интересного. Мини игры, система рейтингов, управление перемещением игрового перса, простое 3д, физические симуляции, даже прототип игры DOOM. Остальное смотрите сами в приложенном видео. Выглядит впечатляюще!

Работает на языке Luau. В статье райв объясняет почему выбрали именно его. Если коротко: простой для понимания дизайнерами, кроссплатформенный и быстрый, мощный инструментарий, есть большая база знаний для AI агента.

Начать погружение можно с обзорного видео от райва, а также с документации райва. И можно присмотреть уроки по Luau))