🐛 Bug：iOS 上带渐变填充的图层不遵循父子关系

[yushuyi]

🐛 Bug：iOS 上带渐变填充的图层不遵循父子关系

环境信息

• lottie-ios 版本：4.5.2
• 平台：iOS（iPhone 真机测试）
• 渲染引擎：默认（Main Thread 和 Core Animation 都测试过）
• 对比：在 lottie-web 上工作正常

问题描述

带有父子关系（parent）的渐变填充形状图层在 iOS 上无法与其父图层一起移动，但在网页预览（lottie-web）中显示完全正常。

预期行为

紫色渐变扫描线应该与白色背景卡片（父图层）一起垂直移动，在整个动画过程中保持相对位置不变，如网页预览所示。

实际行为

在 iOS 设备上：

• ✅ 带有 parent 属性的实线描边图层能正确跟随父图层移动
• ❌ 带有 parent 属性的渐变填充图层独立移动，完全忽略了父子关系

这导致扫描线和背景卡片在不同位置移动，产生明显的视觉分离效果。

截图对比

网页预览（正确）：
扫描线在垂直移动过程中始终附着在背景卡片上

（附上网页预览截图）

iOS 设备（错误）：
扫描线与背景卡片分离移动

（附上 iOS 截图）

复现步骤

1. 使用 lottie-ios 4.5.2 加载下方提供的 JSON 文件
2. 播放动画
3. 观察到渐变扫描线图层独立于其父图层移动

图层结构分析

动画包含以下关键图层：

{
  "layers": [
    {
      "ind": 1,
      "nm": "形状图层 1",
      "ty": 4,
      "parent": 5,  // ✅ 实线描边 - 工作正常
      "shapes": [{
        "ty": "st",  // 描边
        "c": {"k": [0.513, 0.312, 0.948, 1]},
        "w": {"k": 5}
      }],
      "p": {"a": 1, "k": [...]}  // 有位置动画
    },
    {
      "ind": 2,
      "nm": "形状图层 3",
      "ty": 4,
      "parent": 5,  // ❌ 渐变填充 - 不跟随父图层
      "shapes": [{
        "ty": "gr",
        "it": [{
          "ty": "rc",
          "s": {"k": [417.836, 28.539]}
        }, {
          "ty": "gf",  // 渐变填充
          "o": {"k": 100},
          "g": {
            "p": 2,
            "k": {"k": [0, 0.514, 0.314, 0.949, 1, 0.514, 0.314, 0.949, 0, 0.65, 1, 0]}
          },
          "s": {"k": [-210.315, 0]},
          "e": {"k": [224.937, 0]},
          "t": 1
        }]
      }],
      "p": {"a": 1, "k": [...]}  // 有位置动画
    },
    {
      "ind": 3,
      "nm": "形状图层 2",
      "ty": 4,
      "parent": 5,  // ❌ 渐变填充 - 不跟随父图层
      "shapes": [{
        "ty": "gf"  // 渐变填充，配置同上
      }],
      "p": {"a": 1, "k": [...]}  // 有位置动画
    },
    {
      "ind": 5,
      "nm": "Rectangle 34625127",
      "ty": 4,  // 父背景图层
      "p": {"k": [330, 330, 0]}  // 静态位置，无动画
    }
  ]
}

关键发现

• 实线描边图层（ind: 1）设置 "parent": 5 → ✅ 正确跟随父图层移动
• 渐变填充图层（ind: 2, 3）设置 "parent": 5 → ❌ 不跟随父图层，独立移动
• 这表明问题特定于带有父子关系的渐变填充形状（gradient fill with parent）

尝试的解决方法

1. 简化了渐变变换矩阵（移除了极端缩放值如 s: [12.106, 1449.551]）
2. 调整了渐变起点/终点坐标
3. 问题依然存在，父子关系对渐变图层不生效

补充说明

• 渐变本身的颜色、方向、外观都渲染正确
• 渐变图层自身的位置动画（p 属性）正常执行
• 只是父图层的变换（transform）没有被应用到渐变填充的子图层上
• lottie-web 上所有图层（包括渐变填充）都正确遵循父子关系

附件

完整的 Lottie JSON 文件（附在下方或作为文件上传）

---

请问这是已知的限制还是 bug？

如果有任何关于如何正确配置带有父子关系的渐变填充图层的建议，将不胜感激！期待修复或获得解决方案指导，谢谢！

扫描_fixed.json
Google Chrome 2025-10-15 11.45.27.tiff