Lottie — это кроссплатформенная библиотека Airbnb с открытым исходным кодом для рендеринга векторной анимированной графики. Она широко используется в самой Airbnb, и также поддерживает анимацию в тысячах других приложений.
Вчера вышла Lottie 4.0 для iOS. В этом крупном новом выпуске значительно улучшена производительность всех анимаций благодаря совершенно новому движку рендеринга на базе Core Animation.
Предыдущие версии Lottie воспроизводили анимацию в основном потоке приложения, эффективно используя CADisplayLink. Один раз за кадр Lottie выполняла код в основном потоке для продвижения анимации и повторного рендеринга ее содержимого. Это означало, что анимация потребляла от 5 до 20%+ CPU во время воспроизведения, оставляя меньше циклов процессора доступным для остальной части приложения.
Это также означало, что анимации не обновлялись, когда основной поток занят. Это могло привести к тому, что анимация будет пропускать кадры или полностью зависать, что приведет к плохому взаимодействию с пользователем.
В iOS наиболее производительный и эффективный способ воспроизведения анимации — использование Core Animation. Этот системный фреймворк визуализирует анимацию out-of-process и с аппаратным ускорением GPU. Воспроизведение анимации управляется отдельным системным процессом, называемым «сервером рендеринга». Это означает, что анимации на основе Core Animation не влияют на использование процессора процессом приложения и могут продолжаться, даже когда его основной поток заблокирован или занят.
На протяжении 2022 года в Airbnb работали над новой реализацией движка рендеринга для Lottie, построенной на базе Core Animation. Для каждого из слоев в JSON-файле анимации новый движок создает CALayer и применяет CAAnimations с ключевыми кадрами для анимированных свойств слоя. Lottie передает эти ключевые кадры анимации в Core Animation, который заботится об их фактическом отображении на экране и обновлении анимации в каждом кадре.
Этот новый движок устраняет нагрузку на ЦП при воспроизведении анимации Lottie и фактически гарантирует плавную анимацию Lottie со скоростью 60 или 120 кадров в секунду независимо от загрузки ЦП приложением.
Поскольку анимация, отображаемая новым движком, не выполняет никакого кода в основном потоке приложения, у приложений теперь есть больше ресурсов, доступных для других функций. Это особенно ценно при выполнении задач с высокой загрузкой процессора. Например, приложение Airbnb отображает анимацию Lottie при первом запуске. В эксперименте обнаружили, что переход на новый движок рендеринга сокращает общее время запуска приложения, а также улучшает частоту кадров и UX анимации запуска.
Начиная с сегодняшнего выпуска Lottie 4.0 для iOS, механизм рендеринга Core Animation включен по умолчанию во всех приложениях, использующих Lottie, и разработчики приложений не требуют дополнительной работы или миграции. Это важная веха, над которой в компании работали в течение долгого времени, и разработчики надеются, что она поможет поднять планку качества и производительности анимации еще выше.
Lottie 4.0 для iOS также включает в себя несколько значительных улучшений, внесенных членами сообщества:
- Поддержка файлов анимации dotLottie, которые намного меньше по размеру, чем стандартные файлы JSON.
- Новая реализация декодирования анимации, которая примерно в 2 раза быстрее, чем предыдущая реализация на основе Codable.
Более подробно о новой версии вы можете узнать в статье в блоге.