lottie

知识点：

1. lottie结构分析
2. lottie的编辑

lottie结构分析

lottie文件其实就是一份json格式，并且lottie文件一定有这些属性 'v', 'ip', 'op', 'layers', 'fr', 'w', 'h'。

{
      ddd:0,// is3D:1 、0
      fr:frameRate,//帧率
       ip:inPoint,//起始关键帧
      op:outPoint,//结束关键帧
      h: height,//视图高
      w:width, //视图宽    
      layers:[],//动画图层
      meta:meta,
      nm: name,
      v:version,//bodymovin 版本
     
}

图1-1

   {
        ddd:0,
        nm,
        ip，
        op,
        v,
        w,
        h,
        fr,
        assets:[],//资源集合 [图片/预合成层]
        layers:[],//图层集合
        markers:[],//蒙层集合
        meta:{},
        fonts:{},//字体集合
        chars:[]//字符集合
    }

其中layers是一个图层集合，里面包含了当前动画的所有图层数据。

layers

layers:[ {
      "ddd": 0,
      "ty": 4,//LayerType
      "sr": 1,
      "ks": {},//每层不同的动画
      "ao": 0,
      "ip": 0,
      "op": 60,
      "st": 0,
      "bm": 0,
      "ind": 0,
      "nm":"layers1",
      "w": 500,
      "h": 500,
      "shapes":[{
          "nm": "shapes1",
          "ty": "gr",
          it:[]
      }]
    }]

ty为LayerType，类型比较多,常用的应该ty值为0和4；当ty为0时，需要根据refId的值从assets中查找id一样的值。

ty为0

ty为4：

[LayerType.PRECOMPOSITION = 0]
[LayerType.SOLID = 1]
[LayerType.IMAGE = 2]
[LayerType.GROUP = 3]
[LayerType.SHAPE = 4]
[LayerType.TEXT = 5]
[LayerType.AUDIO = 6] 
[LayerType.VIDEO_PLACEHOLDER = 7] 
[LayerType.IMAGE_SEQUENCE = 8]
[LayerType.VIDEO = 9]
[LayerType.IMAGE_PLACEHOLDER = 10] 
[LayerType.GUIDE = 11]
[LayerType.ADJUSTMENT = 12]
[LayerType.CAMERA = 13]
[LayerType.LIGHT = 14]

分析下layers里的ks对象,动画主要来源这个对象的值

 "ks": {
        "o": {、、
          "a": 0,
          "k": 100,
          "ix": 11
        },
        "r": {
          "a": 0,
          "k": 0,
          "ix": 10
        },
        "p": {
          "a": 0,
          "k": [
            270,
            250,
            0
          ],
          "ix": 2,
          "l": 2
        },
        "a": {
          "a": 0,
          "k": [
            250,
            250,
            0
          ],
          "ix": 1,
          "l": 2
        },
        "s": {
          "a": 0,
          "k": [
            100,
            100,
            100
          ],
          "ix": 6,
          "l": 2
        }
      },

  PropertyType.AMOUNT = 'am'
  PropertyType.ANCHOR = 'a'
  PropertyType.ANGLE = 'an'
  PropertyType.OPACITY = 'o'
  PropertyType.POSITION = 'p'
  PropertyType.POINTS = 'pt'
  PropertyType.ROTATION = 'r'
  PropertyType.ROTATION_X = 'rx'
  PropertyType.ROTATION_Y = 'ry'
  PropertyType.ROTATION_Z = 'rz'
  PropertyType.SCALE = 's'
  PropertyType.SKEW_AXIS = 'sa'
  PropertyType.SKEW = 'sk'
  PropertyType.SHAPE = 'sh'
  PropertyType.EXPANSION = 'x'
  PropertyType.FEATHER = 'f'
  PropertyType.SIZE = 'sz'
  PropertyType.ROUNDNESS = 'rd'
  PropertyType.MITER_LIMIT = 'ml'
  PropertyType.STROKE_WIDTH = 'sw'
  PropertyType.NUMBER = 'nu'
  PropertyType.COLOR = 'cl'
  PropertyType.ORIENTATION = 'or'
  PropertyType.GRADIENT = 'gr'
  PropertyType.EFFECT_VALUE = 'v'
  PropertyType.TEXT_DATA = 'd'
  PropertyType.TEXT_ALIGNMENT = 'ta'
  PropertyType.MAX_EASE = 'xe'
  PropertyType.MIN_EASE = 'ne'
  PropertyType.MAX_AMOUNT = 'ma'
  PropertyType.RANGE_UNITS = 'rn'
  PropertyType.OFFSET = 'of'
  PropertyType.EXPRESSION_SELECTOR = 'sm'
  PropertyType.START = 'st'
  PropertyType.END = 'e'
  PropertyType.SATURATION = 'fs'
  PropertyType.HUE = 'fh'
  PropertyType.BRIGHTNESS = 'fb'
  PropertyType.TEXT_TRACKING = 't'
  PropertyType.CENTER = 'cn'
  PropertyType.RADIUS = 'ra'
  PropertyType.DISTANCE = 'ds'

分析shapes

  ShapeType.ELLIPSE = 'el'//椭圆
  ShapeType.FILL = 'fl' //填充颜色
  ShapeType.GRADIENT_FILL = 'gf'
  ShapeType.GRADIENT_STROKE = 'gs'
  ShapeType.GROUP = 'gr' //组
  ShapeType.MERGE = 'mm'
  ShapeType.OFFSET_PATH = 'op'
  ShapeType.PATH = 'sh' //路径
  ShapeType.RECTANGLE = 'rc'
  ShapeType.REPEATER = 'rp'
  ShapeType.ROUNDED_CORNERS = 'rd'
  ShapeType.STAR = 'sr'
  ShapeType.STROKE = 'st'
  ShapeType.TRIM = 'tm'
  ShapeType.TWIST = 'tw'
  ShapeType.PUCKER_BLOAT = 'pb'
  ShapeType.ZIG_ZAG = 'zz'

每个shapes最后一个对象ty为tr，为形状变换信息。

预览lottie

web端可以使用lottie-web，（vue-lottie、react-lottie等）。

编辑lottie

lottie-api

lottie导出其他格式

puppeteer-lottie