Lottie 与 JSON 动画怎么用？网站、iOS、Android 完整教程

Lottie 动画下载后，可以直接放进网站、iOS App 或 Android App 中使用。真正需要接入的不是我们自己写一套动画引擎，而是根据文件格式选择对应的播放器，然后指定动画文件、播放方式和显示尺寸。

本文介绍两种常见格式：

• .json：Bodymovin 导出的 Lottie 动画数据，兼容性最好。
• .lottie：把动画、图片、清单和多个动画打包在一起的 dotLottie 文件，需要使用支持 dotLottie 的播放器。

一、网站使用 JSON 动画

如果网页只需要播放 JSON，使用 lottie-web 就够了。它负责解析 JSON 并把动画渲染到网页容器中。

1. 安装依赖

使用 npm 的项目：

npm install lottie-web

普通 HTML 页面也可以直接引用 CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

官方源码和完整 API 可以查看 lottie-web 项目。

2. 加载动画

<div id="animation-box"></div>

<style>
  #animation-box {
    width: 320px;
    height: 320px;
  }
</style>

<script>
  const animation = lottie.loadAnimation({
    container: document.getElementById('animation-box'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/animations/demo.json'
  });
</script>

path 可以换成你自己的 JSON 地址，例如 WordPress 媒体地址、对象存储地址或其他静态文件地址。只要浏览器能访问这个地址，就可以播放。

3. 播放控制

animation.play();        // 播放
animation.pause();       // 暂停
animation.stop();        // 停止并回到第一帧
animation.setSpeed(0.5); // 半速
animation.setSpeed(2);   // 两倍速
animation.goToAndStop(0, true); // 跳到第一帧

如果只是页面展示动画，通常只需要 autoplay: true 和 loop: true，不需要再写播放按钮、进度条或复杂控制逻辑。

二、网站使用 .lottie 动画

如果网页既要支持 JSON，又要支持 .lottie，可以使用 @lottiefiles/dotlottie-web。它支持 JSON 和 .lottie 两种文件。

官方 Web Component 文档：dotLottie Web Component 使用说明。

1. npm 项目

npm install @lottiefiles/dotlottie-web

import '@lottiefiles/dotlottie-web';

2. 普通 HTML 页面

<script type="module"
  src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@latest/dist/dotlottie-web.js">
</script>

<style>
  dotlottie-player {
    display: block;
    width: 320px;
    height: 320px;
  }
</style>

<dotlottie-player
  src="/animations/demo.lottie"
  autoplay
  loop>
</dotlottie-player>

同一个播放器也可以读取 JSON：

<dotlottie-player
  src="/animations/demo.json"
  autoplay
  loop>
</dotlottie-player>

因此，如果项目同时接收两种格式，可以统一使用 dotLottie Web 播放器，不需要自己判断文件内容或手动解压 .lottie。

三、iOS 使用 JSON 动画

iOS 使用 Lottie iOS。在 Xcode 中通过 Swift Package Manager 添加依赖，或者使用 CocoaPods：

pod 'lottie-ios'

把 demo.json 加入 Xcode 工程，并确认它属于当前 App Target。UIKit 示例：

import UIKit
import Lottie

final class ViewController: UIViewController {
    private let animationView = LottieAnimationView(name: "demo")

    override func viewDidLoad() {
        super.viewDidLoad()

        animationView.translatesAutoresizingMaskIntoConstraints = false
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        animationView.animationSpeed = 1

        view.addSubview(animationView)
        NSLayoutConstraint.activate([
            animationView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            animationView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            animationView.widthAnchor.constraint(equalToConstant: 320),
            animationView.heightAnchor.constraint(equalToConstant: 320)
        ])

        animationView.play()
    }
}

其中 LottieAnimationView(name: "demo") 会读取工程资源中的 demo.json。如果动画文件来自网络，可以先下载到 App 缓存目录，再通过数据或文件方式加载。

iOS 使用 .lottie

较新的 Lottie iOS 版本支持通过 DotLottieFile 读取 .lottie。SwiftUI 示例：

import SwiftUI
import Lottie

struct DemoAnimationView: View {
    var body: some View {
        LottieView {
            try await DotLottieFile.named("demo")
        }
        .playing(loopMode: .loop)
        .resizable()
        .scaledToFit()
        .frame(width: 320, height: 320)
    }
}

如果项目使用的 Lottie iOS 版本较旧，无法识别 .lottie，可以改用 DotLottie iOS，或者把 .lottie 中的 JSON 提取出来使用。

四、Android 使用 JSON 动画

Android 使用 Lottie Android。在模块的 Gradle 文件中添加：

dependencies {
    implementation("com.airbnb.android:lottie:<当前版本>")
}

把动画放到 app/src/main/res/raw/demo.json，然后在 XML 布局中使用：

<com.airbnb.lottie.LottieAnimationView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/lottieView"
    android:layout_width="240dp"
    android:layout_height="240dp"
    app:lottie_rawRes="@raw/demo"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

如果需要用 Kotlin 控制：

binding.lottieView.setAnimation(R.raw.demo)
binding.lottieView.repeatCount = LottieDrawable.INFINITE
binding.lottieView.speed = 1.0f
binding.lottieView.playAnimation()

binding.lottieView.pauseAnimation()
binding.lottieView.resumeAnimation()

五、Android 使用 .lottie 动画

Android 使用 .lottie 可以接入 DotLottie Android。Gradle 依赖以项目页面当前版本为准：

repositories {
    maven(url = "https://jitpack.io")
}

dependencies {
    implementation("com.github.LottieFiles:dotlottie-android:<当前版本>")
}

把 demo.lottie 放进 Android 项目的 assets 目录。Jetpack Compose 示例：

@Composable
fun DemoAnimation() {
    DotLottieAnimation(
        source = DotLottieSource.Asset("demo.lottie"),
        autoplay = true,
        loop = true,
        modifier = Modifier.size(300.dp)
    )
}

DotLottie Android 同样可以加载 JSON。如果项目已经统一使用 DotLottie Android，就可以让用户上传或下载 JSON、.lottie 两种格式，再根据文件名选择对应的资源读取方式。

六、从网站下载后，用户自己的项目怎么用

你的下载站只需要提供动画文件和清楚的格式说明。用户下载以后，按照自己的项目类型选择播放器：

网站本身不需要为用户生成额外代码，也不需要把动画转换成 GIF。用户只要安装对应播放器，把下载的文件放入项目，再按上面的代码加载即可。

七、动画带图片资源时要注意什么

有些 JSON 只包含矢量图层，有些 JSON 还会引用 PNG、JPG 或其他资源。如果 JSON 中有外部图片，不能只下载 JSON，还要把它引用的图片一起下载，并保持原有目录结构。

.lottie 的好处是可以把动画和图片资源打包到一个文件中，减少漏文件的问题。代价是使用者必须选择支持 .lottie 的播放器。如果项目只支持普通 Lottie JSON 播放器，就提供或转换成 JSON。

八、常见问题

为什么页面有容器但动画看不见？

先检查容器是否有宽度和高度。Lottie 会填充容器，如果容器高度为零，动画就算加载成功也不会显示。

网站引用外部 CDN 是否可以？

可以，普通 HTML 页面直接使用 CDN 最快。正式项目建议锁定具体版本，避免播放器自动升级后产生兼容性变化；如果访问速度或网络稳定性有要求，再把依赖改为项目自己的静态资源。

动画文件会被上传到服务器吗？

网页读取的是你在 src 或 path 中指定的文件地址，App 读取的是工程资源或下载缓存。

是不是一定要自己写很多 JavaScript 和 CSS？

不是。播放器负责动画解析和渲染，业务代码通常只需要指定文件、容器、循环和尺寸。播放按钮、进度条、调色器、拖拽上传等都属于额外的预览器功能，不是使用 Lottie 的必需部分。

结论

最简单的选择是：网站 JSON 使用 lottie-web，网站 .lottie 使用 dotLottie Web；iOS 使用 Lottie iOS，Android 使用 Lottie Android。需要 .lottie 的完整打包能力时，再使用 DotLottie 的 iOS 和 Android 播放器。