Lottie 动画的 JSON 文件结构是怎样的，包含哪些主要部分？
Lottie 动画的 JSON 文件结构包含以下主要部分：1. 顶层结构{ "v": "5.7.0", // Lottie 版本 "fr": 30, // 帧率 "ip": 0, // 起始帧 "op": 90, // 结束帧 "w": 800, // 宽度 "h": 600, // 高度 "nm": "Animation", // 动画名称 "ddd": 0, // 3D 标记 "assets": [], // 资源数组 "layers": [] // 图层数组}2. 图层结构每个图层包含以下属性：{ "ddd": 0, // 3D 标记 "ind": 1, // 图层索引 "ty": 4, // 图层类型（4=形状图层） "nm": "Shape Layer", // 图层名称 "sr": 1, // 缩放比例 "ks": {}, // 关键帧属性 "ao": 0, // 自动方向 "ip": 0, // 起始帧 "op": 90, // 结束帧 "st": 0, // 开始时间 "bm": 0, // 混合模式 "shapes": [] // 形状数组}3. 关键帧属性{ "a": { // 锚点 "a": 0, "k": [400, 300, 0], "ix": 1 }, "p": { // 位置 "a": 1, // 1 表示有关键帧 "k": [ { "i": {x: 0.833, y: 0.833}, // 贝塞尔曲线控制点（进入） "o": {x: 0.167, y: 0.167}, // 贝塞尔曲线控制点（离开） "t": 0, // 时间 "s": [0, 0, 0] // 值 }, { "t": 45, "s": [400, 300, 0] } ], "ix": 2 }, "s": { // 缩放 "a": 0, "k": [100, 100, 100], "ix": 3 }, "r": { // 旋转 "a": 0, "k": 0, "ix": 6 }, "o": { // 不透明度 "a": 0, "k": 100, "ix": 7 }}4. 形状结构{ "ty": "gr", // 类型：gr=组，el=椭圆，rc=矩形，sr=星形，sh=形状 "nm": "Group", // 名称 "it": [ // 形状项数组 { "ty": "sh", // 形状 "ks": { "k": { "i": [[0, 0], [0, 0]], // 进入控制点 "o": [[0, 0], [0, 0]], // 离开控制点 "v": [[0, 0], [100, 0], [100, 100], [0, 100]], // 顶点 "c": true // 闭合路径 } } }, { "ty": "fl", // 填充 "c": { "a": 0, "k": [1, 0, 0, 1] // RGBA 颜色 }, "o": { "a": 0, "k": 100 // 不透明度 } }, { "ty": "st", // 描边 "c": { "a": 0, "k": [0, 0, 0, 1] }, "o": { "a": 0, "k": 100 }, "w": { "a": 0, "k": 2 // 描边宽度 } } ]}5. 图层类型ty: 0 - 预合成图层ty: 1 - 文本图层ty: 2 - 图像图层ty: 3 - 空对象ty: 4 - 形状图层ty: 5 - 固态层6. 资源{ "u": "images/", // 资源路径 "p": "image.png", // 文件名 "w": 100, // 宽度 "h": 100, // 高度 "id": "image_0" // 资源 ID}7. 遮罩和蒙版{ "ty": "mask", // 类型 "mode": "a", // 模式：a=添加，s=相减，i=相交 "pt": { // 路径 "a": 0, "k": { "i": [[0, 0], [0, 0]], "o": [[0, 0], [0, 0]], "v": [[0, 0], [100, 0], [100, 100], [0, 100]], "c": true } }, "o": { "a": 0, "k": 100 // 不透明度 }, "x": { "a": 0, "k": 0 // 羽化 }}8. 效果{ "ty": 21, // 效果类型 "nm": "Drop Shadow", // 效果名称 "np": 5, // 参数数量 "mn": "ADBE Drop Shadow", // 匹配名称 "ix": 1, // 索引 "en": 1, // 启用 "ef": [ // 效果参数 { "ty": 0, // 滑块 "nm": "Opacity", "mn": "ADBE Drop Shadow-0001", "ix": 1, "v": { "a": 0, "k": 50 } } ]}9. 3D 变换{ "ty": "tr", "p": { // 位置 "a": 0, "k": [400, 300, 0] }, "a": { // 锚点 "a": 0, "k": [0, 0, 0] }, "s": { // 缩放 "a": 0, "k": [100, 100, 100] }, "r": { // 旋转 "a": 0, "k": [0, 0, 0] // X, Y, Z 轴旋转 }, "rx": { // X 轴旋转 "a": 0, "k": 0 }, "ry": { // Y 轴旋转 "a": 0, "k": 0 }, "rz": { // Z 轴旋转 "a": 0, "k": 0 }, "o": { // 不透明度 "a": 0, "k": 100 }}10. 渐变{ "ty": "gf", // 渐变填充 "g": { "p": 2, // 渐变类型：1=线性，2=径向 "k": { "a": 0, "k": [ { "t": 0, // 位置 "p": 0, // 颜色位置 "c": [1, 0, 0, 1] // RGBA 颜色 }, { "t": 0, "p": 1, "c": [0, 0, 1, 1] } ] } }, "s": { // 起始点 "a": 0, "k": [0, 0] }, "e": { // 结束点 "a": 0, "k": [100, 100] }, "h": { // 渐变角度 "a": 0, "k": 90 }}
