Butter Motion против Rive и Lottie

2026-09-02

Дизайнер присылает файл loader.riv и говорит, что анимация логотипа готова. Вы тащите его в Premiere, и Premiere разводит руками. То же самое с .json, который разработчик вытащил из библиотеки Lottie: анимация есть, в браузере она играет отлично, а секвенция не понимает, что с ней делать.

Это не претензия к инструментам. Rive и Lottie сделаны для продуктов, а не для монтажа, и со своей задачей справляются прекрасно. Ниже разбор того, чего стоит довезти их результат до таймлайна и когда монтажёру честнее не тащить их туда вовсе.

Всё, что написано про Rive и LottieFiles, взято с их официальных сайтов и прочитано 2 сентября 2026 года. Две дырки закрыть не удалось: страница тарифов LottieFiles нашему ридеру не отвечает, поэтому их сумм в статье нет, а документация Rive про экспорт ничего не говорит про альфа-канал в видео, поэтому наличие альфы мы не утверждаем.

Это рантаймы, а не рендеры

Rive называет себя «an end-to-end pipeline for interactive graphics», где «Rive's editor, file format, and runtimes work seamlessly together». В середине конструкции State Machine: вы «create interactivity visually using animations as states», и графика отзывается на «hovers, clicks, taps, and more». Готовый файл уезжает как .riv и играется рантаймом на JavaScript, Flutter, iOS, Android, React, React Native, C++, Defold, Unity или Unreal.

Lottie идея постарше и попроще: векторная анимация в JSON, которую плеер рисует на лету. В документации LottieFiles экспорт в .json описан как «universal compatibility, all Lottie players», а сжатый .lottie как файл, который меньше на 60 процентов, а то и на 80.

Обратите внимание, чего нет ни в одном из этих описаний. Кадров, секвенции, кодека, альфа-канала. Оба формата описывают движение, чтобы приложение нарисовало его само. Ровно поэтому кнопка пружинит под пальцем и ровно поэтому монтажёр не может кинуть такой файл на дорожку.

Как получить файл, который понимает секвенция

Выход в видео есть у обоих, и у обоих с условиями.

Rive рендерит через Cloud Renderer. Вы собираете рендер-пресеты, ставите их в очередь и забираете результат во вкладке Completed. В режиме Animate доступны H.264, GIF, PNG-секвенция, SVG-секвенция и WebM, а документация говорит прямо: «exporting video and images is available on paid plans». На бесплатном аккаунте есть редактор и три совместных файла, то есть как только вам понадобился готовый файл, вы уже на тарифе. Cadet стоит 9 долларов за место в месяц с потолком в три места, Voyager 32 доллара и добавляет библиотеки, хостинг embed-ссылок и 20 долларов кредитов агента на место, Enterprise 120 долларов с SSO и SOC2 Type II.

Для оверлея остаётся открытый вопрос про прозрачность. Страница экспорта не упоминает альфу ни для одного видеоформата, поэтому если графика должна лечь на футаж, закладывайтесь на PNG-секвенцию или проверьте WebM до того, как что-то пообещаете клиенту.

Lottie Creator, редактор в браузере, экспортирует Lottie JSON, dotLottie, MP4, WebM, GIF и MOV. В их списке форматов прозрачность отмечена ровно у одного: WebM, «modern web video, smaller than MP4, transparency support». Бесплатное рабочее пространство держит пять приватных файлов и десять скачиваний публичных анимаций в месяц, а платит LottieFiles только годами: «all plans (Free, Individual, Team, and Enterprise) run on an annual billing cycle».

Есть и короткая дорога, и это самый честный абзац в статье. По описанию LottieFiles на странице их плагина для Premiere Pro плагин достаёт библиотеку прямо из монтажки и вставляет анимации как MOV или MP4, с прозрачным фоном по умолчанию и без всякого хромакея. Саму страницу нашему ридеру 2 сентября 2026 года открыть не удалось, так что это их заявление, а не наша проверка. Если вам нужен типовой спиннер, сердечко или стрелка, это два клика, и ничто в этой статье такое не обыграет.

Путь через After Effects и то, что он теряет

Много Lottie до сих пор начинается в After Effects с панелью LottieFiles, которая живёт в Window, дальше Extensions, и выгружает композицию в JSON. Если After Effects вы знаете, это рабочий маршрут.

И это же место, где ожидания моушн-дизайнера встречаются с форматом. На их странице совместимости написано, что «not all After Effects features can be converted to Lottie format due to the limitations of the JSON-based animation format», и дальше идёт список того, что не переживает конвертацию: все 3D-возможности вместе с камерами и светом, корректирующие слои, стили слоя вроде теней и свечений, большинство эффектов, включая блюры, дисторшны и генераторы, и сложные выражения. Эффекты поддержаны узко: «only certain effects like fill, stroke, and tint are supported». Шейпы, пути, обводки, заливки и трансформации проходят нормально.

Для интерфейсной анимации этот список не стоит вам ничего. Для эфирного титра с мягким свечением он стоит вам как раз того вида, ради которого титр и делали.

Где Butter Motion просто короче

Мы делаем одно, и начинается и заканчивается это внутри Premiere. Вы описываете клип в панели, смотрите живое превью, а готовая анимация рендерится на вашем компьютере в папку _ButterMotion рядом с .prproj, импортируется в свой бин и встаёт на плейхед. Прозрачный клип уходит на дорожку выше футажа осознанно. См. Рендер на таймлайн.

Прозрачность здесь чип перед генерацией, а не тариф, до которого надо дорасти. Прозрачное возвращается как MOV в ProRes 4444, с фоном как MP4 в H.264, на любом тарифе и любом уровне качества. См. Фон и прозрачность.

Форма клипа тоже задаётся до того, как он появился: от 3 до 20 секунд, 16:9, 9:16 или 1:1, от 720p до 4K и 24, 25, 30, 50 или 60 кадров в секунду. На цену не влияет ничего из этого, платите вы только за уровень качества: 7, 10 или 15 кредитов. См. Длительность, формат и разрешение и Уровни качества и 3D.

Отсюда следует ещё одна вещь. То самое 3D, которое Lottie не умеет носить в себе принципиально, доступно на уровне Ultra без доплаты, потому что мы выдаём кадры, а не векторный документ.

Где выигрывают Rive и Lottie, причём с разгромом

Графика должна отвечать. Переключатель, лоадер, который идёт за реальным прогрессом, персонаж, следящий за курсором. State Machine и data binding в Rive существуют ради этого, и отрендеренный клип такое не изобразит никогда.

Анимация уезжает внутрь продукта. Приложению и сайту нужен файл, который масштабируется, весит килобайты и перерисовывается в любом разрешении. MOV в ProRes тут просто не тот предмет.

Одна анимация на много платформ. Тот же .riv играют рантаймы под iOS, Android, Flutter, React и Unity, а Lottie JSON играет везде, где есть Lottie-плеер. Мы рендерим клип для одного таймлайна.

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

Вы дизайнер, а не монтажёр. Редактор Rive даёт точный контроль над вектором, состояниями и таймингом, а Lottie Creator это полноценный редактор в браузере. У Butter Motion есть контролы кастомизации для цветов, текстов, чисел и шрифтов, а на всё остальное слова. Это другой руль.

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

За чем тянуться

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

Если анимация ложится на таймлайн в монтаж, который сдаётся видео, короткой оказывается та дорога, что заканчивается правильным файлом. Это плагин LottieFiles, когда сойдёт готовый ассет из библиотеки, и Butter Motion, когда графика должна быть именно про этот проект: график клиента, ваш заголовок, ваш фирменный цвет, с настоящей альфой, с частотой кадров вашей секвенции и с готовым файлом, который к концу рендера уже лежит в папке проекта.

Тарифа два, 500 или 2000 кредитов в месяц, полный набор функций на обоих. См. Pro и Studio и Что такое Butter Motion.

Related

• Butter Motion против Jitter
• Butter Motion против веб-сервисов для AI-анимации
• Уровни качества и 3D
• Системные требования