Lottie：了解动画及其在移动平台上的工作原理

什么是Lottie以及它如何工作

Lottie — 是Airbnb于2015年创建的开源库，用于实时渲染矢量动画。开发者在Adobe After Effects中创建动画，通过Bodymovin插件导出为JSON，Lottie在目标设备上解释图层、形状、透明度和动画曲线来播放这个JSON。

与视频文件或GIF不同，Lottie不依赖于屏幕分辨率——动画以矢量形式渲染，在任何DPI的设备上看起来都一样。JSON动画的大小平均比等效的GIF或视频小5-10倍，这对于流量有限的移动应用至关重要。

据Airbnb Engineering数据显示，Lottie的引入将应用中动画的大小相比Precomposed视频减少了80%，而帧率在所有支持的设备上保持60 FPS。如今Lottie支持iOS、Android、Flutter、React Native、Web（HTML Canvas和SVG）和桌面平台。

Lottie的性能由原生渲染保证：在iOS上使用Core Animation和CALayer，在Android上使用通过JNI的C++自有Canvas渲染器。这允许在中端设备上也能播放有数十个图层的复杂动画而不丢帧。与WebView解决方案（GIF、APNG、视频）不同，Lottie不会为渲染创建单独的进程，也不会消耗额外内存来解码帧。

将Lottie用于加载指示器、微交互图标、引导页和节日促销动画，在这些场景中流畅性和小体积很重要。

Lottie生态系统包括八个平台的官方播放器、用于浏览器预览的LottieFiles编辑器以及包含数千个现成动画的市场。开发者可以下载JSON，将其集成到项目中，并在不打开After Effects的情况下根据设计系统调整颜色和速度。LottieFiles还提供了SDK，可通过AIR链接加载动画，这样可以在不发布App Store或Google Play应用新版本的情况下更新设备上的动画。

Lottie的JSON格式和Bodymovin

Lottie的JSON模式——是描述矢量动画的开放标准，由三个层次组成：组合（composition）、图层（layers）和形状（shapes）。组合包含元数据：画布大小、帧率和持续时间。

JSON结构

JSON根对象包含layers字段——动画图层数组。每个图层可以是形状（Shape Layer）、图像（Image Layer）、文本（Text Layer）或预组合（PreComp Layer）。每个图层都有变换属性：位置、缩放、旋转和透明度，绑定到关键帧。

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

关键帧（Keyframes）通过带有时间戳、值和用于插值的Bezier曲线的数组来指定。Bodymovin自动将After Effects曲线转换为Lottie可理解的格式，保留时序和ease函数，精确到帧。

Bodymovin——导出插件

Bodymovin——是Adobe After Effects的扩展，将组合导出为Lottie JSON文件。该插件支持After Effects的大部分功能：形状、蒙版、效果、文本图层和跟踪。限制仅针对3D图层和某些插件——它们无法导出，需要将动画简化为2D。

在iOS上集成Lottie

在iOS上，Lottie通过Swift Package Manager、CocoaPods或Carthage集成。主要类——LottieView用于SwiftUI，LottieAnimationView用于UIKit。lottie-ios包支持来自bundle、网络和Data对象的动画。

SwiftUI中的LottieView

LottieView——是SwiftUI的一个View组件，接收来自bundle的JSON文件名或用于从网络加载的URL。动画以指定的速度和重复次数自动播放。

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

对于UIKit，使用LottieAnimationView，通过Interface Builder或编程方式进行配置。View支持所有动画状态：play、pause、stop，以及用于加载数据的进度条。LottieAnimationView可以嵌入UITableViewCell或UICollectionViewCell中，用于列表中的动画图标——滚动时单元格动画暂停，出现在屏幕上时恢复，从而节省CPU和GPU资源。

现代iOS开发积极将Lottie与SwiftUI结合使用，用于创建动画引导页和交互元素：滚动屏幕时，动画的进度通过ScrollViewReader与滚动位置同步。这创建了视差效果，动画持续跟随用户手指的移动，在不使用庞大视频文件的情况下提高参与度。

管理播放

iOS上的Lottie播放器提供API用于播放从特定帧到特定帧，通过KeyPaths更改填充/描边颜色，以及通过LottieAnimationDelegate监听事件。您可以在滚动时暂停动画，在停止时恢复以优化性能。

在Android上集成Lottie

在Android上，Lottie通过Gradle依赖com.airbnb.android:lottie连接。主要组件——LottieAnimationView，可以放置在XML布局中作为普通View，并通过属性或编程方式进行配置。

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

在XML布局中，LottieAnimationView通过属性配置：lottie_rawRes（对res/raw中JSON的引用）、lottie_autoPlay、lottie_loop。从网络加载支持通过lottie_url或编程方式通过setAnimationFromUrl实现。Lottie的Android版本使用自己的Canvas渲染器，独立于硬件加速。

从RawRes和网络加载

对于静态动画，JSON放置在res/raw中并通过RawRes引用。对于动态动画，Lottie从URL或Data对象加载JSON，并带有显示加载百分比的进度回调。Lottie缓存自动将加载的动画保存在内存中，以避免在重复渲染时重新加载。

Lottie for Android支持在RecyclerView中通过直接嵌入列表元素的LottieAnimationView播放动画。为了优化性能，建议使用带延迟加载的setAnimation，并通过RecyclerView.OnChildAttachStateChangeListener回调对屏幕上不可见的元素禁用动画。这可以防止在滚动带有动画图标的长列表时FPS下降。

自定义和管理Lottie动画

Lottie提供强大的API用于自定义现成动画，而无需修改原始的After Effects文件。这允许将单个动画适配到不同的主题、颜色和应用尺寸。

通过KeyPath更改颜色

填充和描边颜色可以在运行时通过KeyPath——到动画元素的字符串路径更改。例如，要将购物车图标的颜色从红色替换为蓝色，只需找到其KeyPath并应用新值。这消除了为不同配色方案存储同一动画的多个版本的需要。

管理速度和进度

每个Lottie动画都可以根据速度（animationSpeed）、进度（setProgress）和帧范围（play(fromFrame:toFrame:)）进行控制。进度模式允许将动画与滚动手势同步：屏幕滚动得越远，动画越靠前——这是引导页和视差效果的流行技术。