Lottie动画源码解析

天花板之恋

已于 2024-12-27 15:34:12 修改

阅读量1.1k

点赞数 26

CC 4.0 BY-SA版权

分类专栏： Android图形显示文章标签： Android Lottie 动画

于 2024-12-27 15:07:19 首次发布

本文链接：https://blog.csdn.net/yus201120/article/details/144733826

Lottie是一个很成熟的开源动画框架，它支持直接使用从AE导出的动画文件，在不同平台均可快速使用，大大减轻了程序员的工作量，也让复杂的动画成为可能。该动画文件使用Json格式来描述内容，可以大大缩减文件的体积。在Android平台，Lottie的作用就是把Json文件做解析，使用code做控制，并通过Canvas绘制出来。Lottie效果如下：
请添加图片描述如果用纯代码去手搓以上的动画效果，估计码农们会原地狗带。而用Lottie作为衔接，这一切就很丝滑，就像显示一张图片一样简单，这就是Lottie的强大，可以说是降维打击。

1.文件结构

1.1最外层文件

Json的最外层结构如下：

{
   
   
  "v": "5.8.0",  //bodymovin的版本
  "fr": 60,      //帧率
  "ip": 0,       //起始关键帧
  "op": 102,     //结束关键帧
  "w": 1350,     //动画宽度
  "h": 800,      //动画高度
  "nm": "recommend_turn page_x0.75_original", //名称
  "ddd": 0,       //是否为3d
  "assets":[],   //资源信息
  "layers":[],   //图层信息
  "markers": []  //遮罩
}

其中的layers是动画最核心的内容，因为Lottie的动画是由不同的Layer组合而成的。

1.2 Layers层

结构如下：

"layers": [                            //图层信息
    {
   
   
      "ddd": 0,         //是否为3d
      "ind": 1,                     //图层id 唯一性
      "ty": 4,            //图层类型
      "nm": "page back 4",//图层名称
      "refId": "comp_0", // 引用的资源，图片/预合成层
      "td": 1,
      "sr": 1,
      "ks": {
   
   ...},              // 变换。对应AE中的变换设置
      "ao": 0,
      "layer": [],         // 该图层包含的子图层
      "shaps": [],         // 形状图层
      "ip": 12,                     //该图层起始关键帧
      "op": 1782,         //该图层结束关键帧
      "st": -18,         
      "bm": 0
    }

ty : 定义了图层的类型，类型有ImageLayer、ShapeLayer、ScaleLayer、SolidLayer、TextLayer和NullLayer，不同的layer会使用不同的变化策略以及不同的资源。
refId ：这是ImageLayer会用到的图片资源。
shaps ：ShapeLayer会用到的资源，描述形状。
ks ：变换的描述，所有图层都会用到这个资源，它是对动画怎么变化的具体描述，它内部包含了很多维度的变。

1.3 KS层

具体如下：

"ks": {
   
    // 变换。对应AE中的变换设置
    "o": {
   
    // 透明度
        "a": 0,
        "k": 100,
        "ix": 11
    },
    "r": {
   
    // 旋转
        "a": 0,
        "k": 0,
        "ix": 10
    },
    "p": {
   
    // 位置
        "a": 0,
        "k": [-167, 358.125, 0],
        "ix": 2
    },
    "a": {
   
    // 锚点
        "a": 0,
        "k": [667, 375, 0