🐛 Bug：iOS 上带渐变填充的图层不遵循父子关系
环境信息
- lottie-ios 版本：4.5.2
- 平台：iOS（iPhone 真机测试）
- 渲染引擎：默认（Main Thread 和 Core Animation 都测试过）
- 对比：在 lottie-web 上工作正常
问题描述
带有父子关系（parent）的渐变填充形状图层在 iOS 上无法与其父图层一起移动，但在网页预览（lottie-web）中显示完全正常。
预期行为
紫色渐变扫描线应该与白色背景卡片（父图层）一起垂直移动，在整个动画过程中保持相对位置不变，如网页预览所示。
实际行为
在 iOS 设备上：
- ✅ 带有
parent 属性的实线描边图层能正确跟随父图层移动
- ❌ 带有
parent 属性的渐变填充图层独立移动，完全忽略了父子关系
这导致扫描线和背景卡片在不同位置移动，产生明显的视觉分离效果。
截图对比
网页预览（正确）：
扫描线在垂直移动过程中始终附着在背景卡片上
（附上网页预览截图）
iOS 设备（错误）：
扫描线与背景卡片分离移动
（附上 iOS 截图）
复现步骤
- 使用 lottie-ios 4.5.2 加载下方提供的 JSON 文件
- 播放动画
- 观察到渐变扫描线图层独立于其父图层移动
图层结构分析
动画包含以下关键图层：
{
"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）
尝试的解决方法
- 简化了渐变变换矩阵（移除了极端缩放值如
s: [12.106, 1449.551]）
- 调整了渐变起点/终点坐标
- 问题依然存在，父子关系对渐变图层不生效
补充说明
- 渐变本身的颜色、方向、外观都渲染正确
- 渐变图层自身的位置动画（
p 属性）正常执行
- 只是父图层的变换（transform）没有被应用到渐变填充的子图层上
- lottie-web 上所有图层（包括渐变填充）都正确遵循父子关系
附件
完整的 Lottie JSON 文件（附在下方或作为文件上传）
请问这是已知的限制还是 bug？
如果有任何关于如何正确配置带有父子关系的渐变填充图层的建议，将不胜感激！期待修复或获得解决方案指导，谢谢！
扫描_fixed.json
Google Chrome 2025-10-15 11.45.27.tiff
🐛 Bug：iOS 上带渐变填充的图层不遵循父子关系
环境信息
问题描述
带有父子关系（parent）的渐变填充形状图层在 iOS 上无法与其父图层一起移动，但在网页预览（lottie-web）中显示完全正常。
预期行为
紫色渐变扫描线应该与白色背景卡片（父图层）一起垂直移动，在整个动画过程中保持相对位置不变，如网页预览所示。
实际行为
在 iOS 设备上：
parent属性的实线描边图层能正确跟随父图层移动parent属性的渐变填充图层独立移动，完全忽略了父子关系这导致扫描线和背景卡片在不同位置移动，产生明显的视觉分离效果。
截图对比
网页预览（正确）：
扫描线在垂直移动过程中始终附着在背景卡片上
（附上网页预览截图）
iOS 设备（错误）：
扫描线与背景卡片分离移动
（附上 iOS 截图）
复现步骤
图层结构分析
动画包含以下关键图层：
{ "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]} // 静态位置，无动画 } ] }关键发现
"parent": 5→ ✅ 正确跟随父图层移动"parent": 5→ ❌ 不跟随父图层，独立移动尝试的解决方法
s: [12.106, 1449.551]）补充说明
p属性）正常执行附件
完整的 Lottie JSON 文件（附在下方或作为文件上传）
请问这是已知的限制还是 bug？
如果有任何关于如何正确配置带有父子关系的渐变填充图层的建议，将不胜感激！期待修复或获得解决方案指导，谢谢！
扫描_fixed.json
Google Chrome 2025-10-15 11.45.27.tiff