Lottie的json动画数据文件配置说明

前言

AI真是技术红利，lottie以往都是ui给到资源包，只管加载。想要了解其中配置文件的各个字段，官方网站半天找不到，用AI提问直接就有结果了，以下内容由cursor回答生成，对比了gpt的生成基本一致的，但是gpt给的相比还是简单了些。

---

我来为您详细解释这个Lottie动画配置文件中各个字段的含义：

根级别字段

{
  "v": "5.11.0",        // Lottie版本号
  "fr": 25,             // 帧率，每秒25帧
  "ip": 0,              // 动画开始帧（in point）
  "op": 75,             // 动画结束帧（out point），总共75帧，3秒动画
  "w": 750,             // 动画画布宽度（像素）
  "h": 1000,            // 动画画布高度（像素）
  "nm": "合成1_00049_00049", // 动画名称
  "ddd": 0              // 是否3D动画（0=2D，1=3D）
}

assets 资源数组

定义动画中使用的所有资源（图片、音频等）：

{
  "id": "image_0",      // 资源唯一标识符
  "w": 750,             // 图片宽度
  "h": 1000,            // 图片高度
  "u": "images/",       // 图片文件夹路径
  "p": "img_0.png",     // 图片文件名
  "e": 0                // 嵌入标志（0=外部文件，1=嵌入）
}

layers 图层数组

每个图层代表一个可视元素：

{
  "ddd": 0,             // 图层是否3D
  "ind": 1,             // 图层索引（唯一标识）
  "ty": 2,              // 图层类型（2=图片图层，1=实体图层，0=预合成等）
  "nm": "合成1_00049_00000.png", // 图层名称
  "cl": "png",          // 图层类别标识
  "refId": "image_0",   // 引用的资源ID
  "sr": 1,              // 拉伸倍率（时间缩放）
  "ks": {               // 变换属性（keyframes）
    "o": {              // 不透明度
      "a": 0,           // 是否有动画（0=静态值，1=有关键帧）
      "k": 100,         // 静态值（100%不透明）
      "ix": 11          // 属性索引
    },
    "r": {              // 旋转角度
      "a": 0,
      "k": 0,           // 0度旋转
      "ix": 10
    },
    "p": {              // 位置
      "a": 0,
      "k": [375, 500, 0], // [x, y, z] 坐标
      "ix": 2,
      "l": 2            // 属性维度（2D）
    },
    "a": {              // 锚点
      "a": 0,
      "k": [375, 500, 0], // 锚点坐标
      "ix": 1,
      "l": 2
    },
    "s": {              // 缩放
      "a": 0,
      "k": [100, 100, 100], // [x%, y%, z%] 缩放比例
      "ix": 6,
      "l": 2
    }
  },
  "ao": 0,              // 自动定向（0=关闭）
  "ip": 0,              // 图层入点（开始显示的帧）
  "op": 1,              // 图层出点（结束显示的帧）
  "st": 0,              // 图层开始时间
  "bm": 0               // 混合模式（0=正常）
}

动画逻辑解释

这个动画文件实现了一个图片序列动画：

1. 总时长：75帧 ÷ 25fps = 3秒

2. 播放方式：每帧显示一张不同的图片，形成连续动画

3. 图片切换：

   • 第0帧显示 img_0.png
   • 第1帧显示 img_1.png
   • …
   • 第49帧显示 img_49.png
   • 第50-75帧继续显示 img_49.png（最后一张图停留1秒）

4. 图层时间控制：

   • ip: 图层开始显示的帧
   • op: 图层结束显示的帧
   • 每个图层只显示1帧，除了最后一个显示26帧

这种设计常用于制作帧动画、序列图动画或者类似GIF的效果。