什么是Lottie ，以及前端如何使用

背景

主要是解释下Lottie动画的使用，以及如何获取资源，如何前端引入及控制他的播放

什么是Lottie

Lottie 是 Airbnb 开发的一种跨平台动画格式，它基于 JSON 格式存储动画数据，能够直接在移动设备（iOS/Android）、网页（Web）和桌面应用中渲染高质量动画。

其核心原理是：设计师使用 After Effects 制作动画后，通过 Lottie 插件（如 Bodymovin）将动画导出为 JSON 文件，开发者无需额外编码，直接调用 Lottie 库（如 lottie-web、lottie-ios 等）即可加载和播放动画，无需依赖传统的图片格式（如 PNG、GIF）或视频。

Lottie 动画 vs SVG、PNG 的优点

对比维度	Lottie 动画	SVG	PNG
文件体积	极小。基于 JSON 描述动画逻辑，无像素数据，复杂动画体积也远小于同等效果的 SVG/PNG 序列。	较小，但复杂图形（如渐变、路径）体积会显著增加；若包含动画（如 SMIL），体积进一步变大。	大。基于像素存储，分辨率越高、色彩越丰富，体积越大；动态效果需多张 PNG 序列，体积呈倍数增长。
动态表现力	极强。支持复杂动画（如路径动画、形变、透明度过渡、3D 效果等），且流畅度不受分辨率影响。	有限。仅支持简单动画（如 SMIL 规范的缩放、平移），复杂动画需结合 JS 实现，性能较差。	极差。静态图片，动态效果需通过多张 PNG 逐帧切换（类似 GIF），流畅度低，且会产生卡顿。
分辨率适配	无损适配任意分辨率。矢量渲染，在高清屏幕（如 Retina）上不会模糊，无需为不同设备准备多套资源。	无损适配任意分辨率（矢量特性），但复杂图形在放大后可能出现边缘锯齿。	有损适配。基于像素，放大后会模糊；需为不同分辨率设备准备多套图片（如 @1x、@2x），增加开发成本。
开发效率	高。设计师导出 JSON 后，开发者直接调用 Lottie 库即可加载，无需手动处理动画逻辑；跨平台通用（一套资源支持多端）。	中等。需手动处理 SVG 代码（如优化路径、兼容动画），且不同平台对 SVG 动画的支持度不一致（如 iOS 对 SMIL 支持差）。	低。静态图片需手动拼接成动态效果（如用 JS 切换帧），且多分辨率适配需额外开发，工作量大。
性能	优秀。通过硬件加速渲染，占用 CPU / 内存资源少，复杂动画也能保持流畅（帧率稳定）。	一般。复杂 SVG 或动画可能导致渲染卡顿，尤其是在低端设备上。	较差。逐帧切换 PNG 会频繁触发重绘，占用大量 CPU 资源，容易出现掉帧。

如何获取 Lottie的json文件

iconfont-阿里巴巴矢量图标库

lottiefiles

进入仓库 打开刚才保存的详情

以react为例 前端如何引入

基础引入

import Lottie from 'lottie-react'

import groovyWalkAnimation from '@/assets/lottie/Success.json'

const AnimationComponent = () => {
  return (
    <Lottie
      animationData={groovyWalkAnimation}
      autoplay={true}
      loop={true}
      style={{ width: 300, height: 300 }}
    />
  )
}

export default AnimationComponent

默认播放最后一帧 鼠标滑过则播放动画

import Lottie from 'lottie-react'
import React, { useRef, useEffect, useState } from 'react'

import groovyWalkAnimation from '@/assets/lottie/Success.json'

const AnimationComponent = () => {
  const lottieRef = useRef<any>(null)
  // 状态：标记动画是否正在播放（初始为false）
  const [isPlaying, setIsPlaying] = useState(false)

  // 初始跳转到最后一帧
  useEffect(() => {
    const lottieInstance = lottieRef.current
    if (lottieInstance) {
      const totalFrames = lottieInstance.getDuration(true)
      lottieInstance.goToAndStop(totalFrames, true)
    }
  }, [])

  // 鼠标悬停触发动画（仅当未在播放时）
  const handleMouseOver = () => {
    if (!isPlaying && lottieRef.current) {
      setIsPlaying(true) // 锁定：标记为正在播放
      lottieRef.current.goToAndPlay(0, true) // 开始播放
    }
  }

  // 动画播放完成后解锁
  // const handleComplete = () => {
  //   setIsPlaying(false) // 解锁：允许下次触发
  //   // 确保动画停在最后一帧（可选，根据需求）
  //   const totalFrames = lottieRef.current?.getDuration(true)
  //   lottieRef.current?.goToAndStop(totalFrames, true)
  // }

  return (
    <Lottie
      animationData={groovyWalkAnimation}
      autoplay={false}
      loop={false}
      lottieRef={lottieRef}
      onMouseLeave={() => {
        setIsPlaying(false)
      }}
      onMouseEnter={handleMouseOver}
      // onComplete={handleComplete} // 监听动画完成事件
      style={{ width: 300, height: 300 }}
    />
  )
}

export default AnimationComponent

总结

Lottie 动画的核心优势在于极小的体积、无损的分辨率适配、强大的动态表现力 ，以及跨平台的便捷开发，完美解决了 SVG 动画能力有限、PNG 体积大且动态效果差的问题，尤其适合需要高质量动态交互的场景（如 App 引导页、UI 动效、数据可视化等）。

以后我们做动画的时候 多一种选择