一. 问题背景

UI给了一份地址栏的背景框的lottie动画的json文件，我用版本为3.3.0的lottie-ios库的AnimationView直接加载，出来的lottie动画背景框，有一段边框会消失。

    lazy var firstAnimationView: AnimationView = {
        let animation = AnimationView(name: "dest_animation")
        animation.loopMode = .loop
        animation.backgroundBehavior = .pauseAndRestore
        return animation
    }()

效果图:

lottie_animation_border.gif

二. 问题排查

因为统一的lottie动画的json文件在安卓上是显示正常的，因为lottie是三方库，因此特意去官网和github查了下，lottie对安卓和iOS支持的差异，

[lottie不同平台支持特性]

然后将lottie动画的json一段一段分析调试也没找到原因，后来我去github提了issues

[lottie动画效果在iOS上面边框显示异常]

然后作者回复了下，说lottie的3.4.0以上版本,可以直接采用Core Animation渲染引擎，能保证动画执行稳定顺畅。

image.png

我试了下，采用了lottie的3.5.0的版本，采用Core Animation渲染引擎，果然显示正常:

 // MARK: - Lazy
    lazy var firstAnimationView: LottieAnimationView = {
        let animation = LottieAnimationView(name: "dest_animation")
        animation.loopMode = .loop
        animation.backgroundBehavior = .pauseAndRestore
        return animation
    }()

    lazy var secondAnimationView: LottieAnimationView = {
        let config = LottieConfiguration(renderingEngine: .coreAnimation, decodingStrategy: .codable)
        let animation = LottieAnimationView(name: "dest_animation", configuration: config)
        animation.loopMode = .loop
        animation.backgroundBehavior = .pauseAndRestore
        return animation
    }()

lottie_normal_animation.gif

从效果图可以看出，第一个lottie动画采用主线程的渲染引擎，第二个lottie动画采用了Core Animation的渲染引擎。

去官网查了下资料: https://github.com/airbnb/lottie-ios/discussions/1627

Lottie [3.4.0](https://github.com/airbnb/lottie-ios/releases/tag/3.4.0) is now available! This release adds a new rendering engine that uses Core Animation instead of animating on the main thread. This significantly improves animation performance while also eliminating CPU overhead.

Lottie’s original rendering engine played its animations on the app’s main thread. Once per frame, Lottie advanced the progress of the animation and re-rendered its content. This meant that:

• Animations would consume 5-20%+ of the CPU while playing, leaving fewer CPU cycles available for the rest of the application.

• Animations would not update when the main thread was busy, which could cause animations to drop frames or freeze entirely.

Lottie 3.4.0 includes a new rendering engine that addresses these issues and significantly improves performance. The new engine leverages Core Animation to render out-of-process with GPU hardware acceleration. Once animations begin playing, they do not consume any of the app’s CPU resources, and are effectively guaranteed to animate smoothly regardless of CPU load:

这里意思就是lottie动画采用主线程的渲染引擎，动画的每一帧是由主线程来更新，并提交渲染，因此受限于主线程runloop是否繁忙，也使得CPU功能繁忙。而lottie动画采用Core Animation的渲染引擎，则是将动画渲染提交到Core Animation去处理，Core Animation直接调用Gpu去渲染，这个过程不受主线程runloop限制，也不占用CPU能保证动画运行的顺畅。

但同时用lottie的3.5.0测试，在iOS13以下的系统，发现该lottie动画竟然不显示，断点调试了下源码，发现是CGColor分类的rgb颜色方法这里有问题:

image

return CGColor(
        colorSpace: CGColorSpaceCreateDeviceRGB(),
        components: [red, green, blue])!.copy()!

这个方法默认返回的颜色的alpha为0导致，动画不显示，因此对这里改动了如下:

 CGColor(
        colorSpace: CGColorSpaceCreateDeviceRGB(),
        components: [red, green, blue])!.copy(alpha: 1)!

将颜色值的透明度alpha默认设置为1。

同时也在github再次提了issues

[lottie动画3.5.0版本在iOS13以下系统不显示]

而作者也给了回复，说他两周前也发现这个问题，提了修复，但是还没发新版本，修复提交如下:

https://github.com/airbnb/lottie-ios/pull/1801/files#diff-a349bd038afce438fb0b070fb8054b858853b0504514df74ff72a6be8f0d6d89R9

因此作者建议我采用最新的master代码。

三. 解决方案

最终我采用lottie的3.5.0版本再加上对iOS13以下系统颜色修复的提交，并将lottie动画制作为二方库，而对于具体代码修改:可以在每个动画指定渲染引擎:

• 单个lottie动画指定渲染引擎

lazy var secondAnimationView: LottieAnimationView = {
        let config = LottieConfiguration(renderingEngine: .coreAnimation, decodingStrategy: .codable)
        let animation = LottieAnimationView(name: "dest_animation", configuration: config)
        animation.loopMode = .loop
        animation.backgroundBehavior = .pauseAndRestore
        return animation
    }()

• 也可以指定全局范围的自动选择渲染引擎，默认优先选择Core Animation渲染引擎，如果Core Animation解析渲染失败，则会调用主线程渲染引擎进行渲染

LottieConfiguration.shared.renderingEngine = .automatic