Делаем свой QML-компонент для Lottie-анимаций с помощью rlottie

Вот важная новость с фронта ИИ: slavacpp 14 минут назад Делаем свой QML-компонент для Lottie-анимаций с помощью rlottie 6 мин 324 C++ * Qt * Туториал В современном UI помимо удобства есть еще свистелки и гуделки, чтобы зацепить взгляд пользователя. И, зачастую, такой свистелкой являются анимации: нажал кнопку, а у тебя вокруг спец-эффекты, поставил палец вверх, а он красиво подпрыгнул, и так далее. Большинство таких анимаций, которые вы видите в приложениях практически каждый день, сделаны с помощью Lottie.

Например, в Telegram, часть анимированных стикеров и эмодзи сделаны как раз с помощью Lottie. Почему именно Lottie? Lottie — это JSON-based формат векторной анимации, поэтому он легковесный, легко масштабируется, не требует видеокодеков, хорошо выглядит на экранах с разным DPI.

Технические детали

Проблема с текущей реализацией в QtВ Qt не так давно (относительно возраста фреймворка) появился модуль с Lottie и соответствующий компонент — LottieAnimation. В целом, компонент закрывает базовые задачи, но у него есть ограничения и некоторые проблемы, которые уже почти семь лет никто не решает. Для моих задач он не подходит по следующим причинам:нет масштабирования, то есть компонент отображается в размерах, которые изначально указаны в исходном Lottie;некоторые Lottie файлы (например, те же стикеры в Telegram) не открываются: в stderr можно увидеть ошибку неподдерживаемого элемента.

Базовый скелет компонентаШтош. Ничего не остается как написать свой QML-компонент для отображения Lottie, классический DIY. Полностью мы, конечно же, нырять в спецификацию Lottie не будем, к счастью на просторах github есть готовые библиотеки для работы с Lottie, например, rlottie.

Нам же остается это завернуть в удобный QML-компонент с максимальным соответствием API к стандартному LottieAnimation. Так как мы пишем графический компонент, то будем наследоваться от QQuickItem — это базовый класс для графических элементов в QML. Первым делом добавляем макрос QML_ELEMENT, который автоматически регистрирует наш C++ класс как тип, доступный в QML.

Отраслевые последствия

Регистрация происходит по имени класса, в моем случае это — AnotherLottie. В старых версиях Qt это делалось с помощью вызова qmlRegisterType(... ) в рантайме и было менее надежным.

Далее добавляем нужные свойства для нашего компонента с помощью макроса Q_PROPERTY, стараемся сделать так, чтобы это соответствовало API LottieAnimation для легкого "переезда" на новый компонент.

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