2D-персонаж · SVG-риг · Lottie
Кабанчик, который оживает в каждом кадре
Дышит, топает, мчится галопом, удивляется и радуется. Следит за курсором, любит, когда его гладят, и никогда не откажется от жёлудя.
Хрум на сцене, пульт — рядом с ним. Выберите состояние или просто пообщайтесь: наведите курсор, проведите по спинке, нажмите на пятачок.
Хрум сейчасждёт и оглядывается
Каждое состояние — отдельный живой цикл. Переходы между ними сглажены, поэтому Хрум не переключается, а меняет настроение.
Пять ключевых кадров раскадровки и аниматик по ним. Нажмите на кадр, чтобы перейти к нему в сцене.
Прозрачные слепки показывают, как тело готовится, сжимается и тянется. Ползунок проводит прыжок кадр за кадром.
Лицо собрано из управляемых деталей: веки, брови, зрачки, рот, румянец. Эмоция — это просто сочетание их значений, и между любыми двумя можно плавно перейти.
Радость
Персонаж нарисован в одном SVG-файле и собран в иерархию узлов с опорными точками. Ноги работают на обратной кинематике: потяните за копыто.
Тяни за кружок у копыта
Скрипт запекает циклы рига в стандартный Lottie JSON: узлы становятся слоями с родителями, фигуры — векторными слоями, моргание и сужение хвоста — ключами форм. Справа файл проигрывает обычный плеер lottie-web, без нашего рига.
Персонаж готов к работе в продукте: загрузка, пустые экраны, уведомления, помощник, страница ошибки.