Проблемы с производительностью Lottie обычно возникают из-за файла, а не плеера. After Effects позволяет легко добавлять функции, покадровая визуализация которых на телефоне требует больших затрат.
Начните с файла. Маски и матовые маски часто обходятся дороже всего; по возможности замените их более простыми формами. Удалите эффекты и размытия, которые игроку не нужны. Объединяйте фигуры, уменьшайте количество слоев и тщательно выполняйте предварительную композицию. Большие встроенные изображения увеличивают объем памяти и затраты на декодирование, поэтому оптимизируйте или замените их векторами. Инспектор Lottie, такой как наша бесплатная программа просмотра Lottie JSON, помогает вам увидеть, что находится внутри файла.
Затем проверьте, как приложение его воспроизводит. Анимации, которые продолжают повторяться, когда они находятся за пределами экрана, внутри закрытой вкладки или в ячейке списка, которая прокручивается, по-прежнему используют процессор и батарею. Приостанавливайте их, когда они не видны, и останавливайте ненужные циклы. Избегайте одновременного воспроизведения десятков анимаций.
Выберите правильные варианты для вашей платформы. В Интернете средства рендеринга SVG и Canvas работают по-разному в зависимости от анимации, поэтому протестируйте оба. Сжатый формат .lottie (dotLottie) уменьшает размер загрузки. На Android протестируйте аппаратное ускорение там, где его поддерживает ваш плеер.
Наконец, измерьте на бюджетном устройстве. Если анимация по-прежнему слишком тяжелая, возможно, она неподходящий инструмент для этой работы: простая CSS или собственная анимация может заменить декоративный цикл, а интерактивные компоненты лучше встраивать в инструмент, основанный на состоянии, такой как Rive или ExodeUI, который мы создаем.