什么是lottie json - Javascript

Lottie是一种将Adobe After Effects动画导出为可缩放矢量动画的解决方案，运行于JavaScript代码中。它使用JSON格式，将矢量图形、位图和动画导出为精简的数据格式，并可以在任何支持它的Web上使用，如浏览器、移动应用程序和桌面应用程序。

Lottie JSON文件格式

Lottie JSON文件的格式非常简单。以下是一个Lottie JSON文件的例子：

{
  "v": "5.5.2",
  "fr": 30,
  "ip": 0,
  "op": 60,
  "w": 1920,
  "h": 1080,
  "nm": "Untitled",
  "ddd": 0,
  "layers": [
    {
      "ddd": 0,
      "ind": 1,
      "ty": 4,
      "nm": "Shape Layer 1",
      "sr": 1,
      "ks": {
        "o": {
          "a": 0,
          "k": 100,
          "ix": 11
        },
        "r": {
          "a": 0,
          "k": 0,
          "ix": 10
        },
        "p": {
          "a": 0,
          "k": [
            960,
            540,
            0
          ],
          "ix": 2
        },
        "a": {
          "a": 0,
          "k": [
            -43.4,
            -12,
            0
          ],
          "ix": 1
        },
        "s": {
          "a": 0,
          "k": [
            100,
            100,
            100
          ],
          "ix": 6
        }
      },
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "ty": "rc",
              "d": 1,
              "s": {
                "a": 0,
                "k": [
                  2,
                  2
                ],
                "ix": 2
              },
              "p": {
                "a": 0,
                "k": [
                  0,
                  0
                ],
                "ix": 3
              },
              "r": {
                "a": 0,
                "k": 0,
                "ix": 4
              },
              "nm": "Rectangle Path 1",
              "mn": "ADBE Vector Shape - Rect",
              "hd": false
            }
          ],
          "nm": "Shape 1",
          "hd": false
        }
      ],
      "ip": 0,
      "op": 60,
      "st": 0,
      "bm": 0
    }
  ]
}

Lottie JSON文件主要由以下几个部分组成：

• v: 用于指定Lottie所使用的版本号。
• fr: 指定每秒帧数。
• ip: 动画的起始时间。
• op: 动画在时间轴的结束时间。
• w: 表示动画宽度。
• h: 表示动画高度。
• nm: 为动画设置的名字。
• ddd: 声明是否是3D动画，0为2D，1为3D。
• layers: 包括描述视觉元素的一组缩放、旋转、位移和其他动画属性。

如何在JavaScript中使用Lottie

我们可以使用npm安装lottie-web来将Lottie JSON文件加载到JavaScript代码中。

npm install lottie-web

然后，使用以下代码将Lottie JSON文件加载到页面中：

import lottie from 'lottie-web';
import animationData from './animation.json';

const animation = lottie.loadAnimation({
  container: document.getElementById('animationContainer'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData,
});

上述代码中，我们导入lottie-web库和Lottie JSON文件，然后使用lottie.loadAnimation()函数来加载JSON文件。接下来，我们在页面中找到一个指定的容器（例如HTML中的一个div），并将其引用传递给container选项。renderer选项指定了动画输出类型（SVG或Canvas），loop选项指定动画是否循环播放，autoplay选项指定动画是否自动播放。最后，我们将引用了JSON文件的animationData参数传递给lottie.loadAnimation()函数。该函数将返回一个Animation实例，我们可以使用该实例来控制动画的运行状态。

至此，我们已经成功地将Lottie JSON文件加载到JavaScript代码中，并将其渲染为SVG或Canvas格式的矢量动画。