Новый движок рендеринга со значительными улучшениями производительности на базе Core Animation.
Автор: Кэл Стивенс
Lottie — это кроссплатформенная библиотека Airbnb с открытым исходным кодом для рендеринга векторной анимированной графики. Мы широко используем Lottie в Airbnb, а так же она используется для анимацию в тысячах других приложений по всей отрасли.
Пример анимации Lottie, включенной в приложение Airbnb для iOS.
Сегодня мы выпускаем Lottie 4.0 для iOS. В этом крупном новом выпуске значительно улучшена производительность всех анимаций Lottie благодаря совершенно новому движку рендеринга на базе Core Animation.
Используя Lottie на протяжении многих лет, мы многое узнали о его характеристиках производительности в реальных условиях использования. Мы обнаружили, что анимация Lottie довольно часто пропускала кадры на некоторых из наших более сложных экранов. Чтобы понять почему, мы сначала должны взглянуть на то, как Lottie ранее рендерила анимацию.
Предыдущие версии Lottie воспроизводили анимацию в основном потоке приложения, эффективно используя CADisplayLink. Раз в кадр Lottie выполнял код в основном потоке, продвигая прогресс анимации и повторной отрисовки ее содержимого. Это означало, что во время воспроизведения анимация съедала от 5 до 20%+ ЦП, оставляя для остальной части приложения меньше циклов ЦП доступными:
Воспроизведение анимации с помощью Lottie 3.5.0 с использованием исходного механизма рендеринга основного потока.
Это также означало, что анимации не обновлялись, когда основной поток был занят. Это могло приводить к тому, что анимации пропускали кадры или полностью зависали, что приводило к плохому взаимодействию с пользователем:
Анимация Lottie пропускает кадры, когда основной поток перегружен
Эти проблемы являются неотъемлемыми ограничениями использования архитектуры рендеринга с привязкой к основному потоку.
В iOS наиболее производительный и энергоэффективный способ воспроизведения анимации - использование Core Animation. Этот системный фреймворк отрисовывает анимацию вне процесса с аппаратным ускорением GPU. Воспроизведением анимации управляет отдельный системный процесс, называемый «сервером рендеринга». Это означает, что анимации на Core Animation не влияют на использование ЦП самим процессом приложения и могут продолжаться, даже когда его основной поток заблокирован или занят.
На протяжении 2022 года мы работали над новой реализацией механизма рендеринга для Lottie, построенного на базе Core Animation. Для каждого из слоев в JSON-файле анимации новый движок создает CALayer и применяет CAAnimations с ключевыми кадрами для анимированных свойств слоя. Lottie передает эти ключевые кадры анимации в Core Animation, который заботится об их фактической визуализации на экране и обновлении анимации в каждом кадре.
Этот новый движок устраняет нагрузку на ЦП при воспроизведении анимации Lottie и фактически гарантирует плавную анимацию Lottie со скоростью 60 или 120 кадров в секунду независимо от загрузки ЦП приложения.
Воспроизведение анимации с помощью Lottie 4.0 с использованием нового механизма рендеринга Core Animation.
Поскольку анимация, отрисованная новым движком, не выполняет никакого кода в основном потоке приложения, у приложений теперь есть больше ресурсов, доступных для других функций. Это особенно ценно при выполнении задач с высокой нагрузкой на процессор. Например, приложение Airbnb отображает анимацию Lottie при первом запуске. Мы провели здесь эксперимент и обнаружили, что переход на новый движок рендеринга сокращает общее время запуска нашего приложения, а также улучшает частоту кадров и UX анимации запуска.
Мы впервые представили движок рендеринга Core Animation в Lottie 3.4.0 ранее в этом году, с пометкой «Opt-in». Мы используем новый движок по умолчанию для всех анимаций Lottie в приложении Airbnb уже более шести месяцев и усердно работаем над устранением проблем, о которых сообщают первые пользователи в сообществе.
Opt-in - форма согласия, которую дают веб-пользователи, признавая интерес к продукту или услуге и разрешая третьей стороне связываться с ними для получения дополнительной информации
Начиная с сегодняшнего релиза Lottie 4.0 для iOS, механизм рендеринга Core Animation включен по умолчанию для всех приложений, использующих Lottie, и разработчики приложений не требуют дополнительной работы или миграции. Это важная веха, над которой мы работали в течение долгого времени, и мы надеемся, что она поможет поднять планку качества и производительности анимации еще выше во всей отрасли!
Lottie 4.0 для iOS также включает в себя несколько значительных улучшений, внесенных членами сообщества:
Поддержка файлов анимации dotLottie, которые намного меньше по размеру, чем стандартные файлы JSON.
Новая реализация декодирования анимации, которая примерно в 2 раза быстрее, чем предыдущая реализация на основе Codable.
Вы можете узнать больше о Lottie и нашей приверженности открытому исходному коду в предыдущих постах, которые мы опубликовали:
Представляем Lottie: за кулисами нашего нового инструмента анимации с открытым исходным кодом
Быстрое продвижение Lottie в будущее: личная история о том, как Airbnb переписала популярную библиотеку с открытым исходным кодом Lottie на новый язык
Хотите работать в Airbnb? Ознакомьтесь с открытыми вакансии:
Благодарность
Большое спасибо Эрику Хорачеку за то, что он впервые предложил этот проект и рассмотрел более 100 запросов на включение за последний год. Также спасибо Брэндону Уитроу, первому автору Lottie, а также многим другим участникам, которые помогали нам на протяжении многих лет.
Все названия продуктов, логотипы и торговые марки являются собственностью их соответствующих владельцев. Все названия компаний, продуктов и услуг, используемые на этом веб-сайте, предназначены только для идентификации. Использование этих названий, логотипов и торговых марок не подразумевает их одобрения.