Swift中部分Lottie动画显示变形问题排查求助

我在iOS应用中使用Lottie框架，已修改所有动画的颜色以适配我的调色板。所有动画JSON文件均直接从Lottie编辑器下载，编辑器中动画显示正常，但使用相同方法加载时部分动画出现变形，其余则正常。请问是否存在可修复的JSON问题？

加载动画的代码 #

func expandModal() {
    if state != .contracted {
        return
    }
    dismissMe = false
    contractedFrame = self.frame
    solutionLabel.alpha = 0
    state = .gettingBigger
    let animation = Animation.named(name)
    animationView.animation = animation
    animationView.loopMode = .loop
    animationView.frame = leftArrow.frame
    leftArrow.alpha = 0
    addSubview(animationView)
    UIView.animate(withDuration: 0.5) { [self] in
        frame = CGRect(x: 0, y: 0, width: 300, height: 400)
        center = self.superview!.center
        layer.cornerRadius = 10
        leftArrow.frame = CGRect(x: 10, y: 20, width: modalType == .Points ? 100 : 150, height: modalType == .Points ? 100 : 150)
        leftArrow.center.x = frame.width / 2
        animationView.frame = leftArrow.frame
        titleLabel.alpha = 1
        titleLabel.numberOfLines = 2
        titleLabel.frame = CGRect(x: 24*kWidthFactor, y: leftArrow.frame.maxY + 24 * kHeightFactor, width: self.frame.width - 48 * kWidthFactor, height: 1000)
        titleLabel.font = sfUITextBold(fontSize: 24 * kHeightFactor)
        titleLabel.textAlignment = .center
        titleLabel.sizeToFit()
        titleLabel.center.x = self.frame.width / 2
        addSubview(titleLabel)
                    
        descriptionLabel.alpha = 1
        descriptionLabel.numberOfLines = 0
        descriptionLabel.frame = CGRect(x: 24*kWidthFactor, y: titleLabel.frame.maxY + 12 * kHeightFactor, width: self.frame.width - 48 * kWidthFactor, height: 1000)
        descriptionLabel.text = descriptionString
        descriptionLabel.font = sfUITextRegular(fontSize: 18 * kHeightFactor)
        descriptionLabel.sizeToFit()
        addSubview(descriptionLabel)
    } completion: { [self] _ in
        self.state = .expanded
        animationView.play()
    }
}

相关素材说明 #

• Pathfinder动画：
  • 修改颜色后的JSON文件
  • 应用内显示变形的截图
  • Lottie编辑器中显示正常的截图
• Architect动画：
  • 修改颜色后的JSON文件
  • 应用内显示变形的截图
• 应用内动画变形的演示视频

修复方案 #

1. 校验JSON的尺寸匹配性 #

打开变形动画的JSON文件，找到根节点的w（原始宽度）和h（原始高度）字段，对比你设置的animationView.frame尺寸比例。如果两者比例不一致，直接赋值frame会导致拉伸变形。

• 解决：要么调整animationView的frame尺寸和JSON原始尺寸比例一致，要么设置animationView.contentMode = .scaleAspectFit保持比例。

2. 修正LottieView的内容模式 #

当前代码直接给animationView.frame赋值，默认内容模式是.scaleToFill，会强制拉伸填满容器。添加以下代码：

animationView.contentMode = .scaleAspectFit
// 若需要完全填满容器且不变形，确保JSON原始尺寸和frame比例完全匹配

3. 检查JSON的图层变换属性 #

修改颜色时可能误操作了图层的变换参数：

• 用Lottie编辑器重新打开变形的JSON，检查所有图层的Transform属性（位置、缩放、锚点），删除异常的固定值或关键帧。
• 导出时选择「导出为iOS兼容」选项，避免编辑器的非标准属性被带入JSON。

4. 强制动画尺寸适配 #

加载动画时可以指定尺寸，避免自动适配异常：

let animation = Animation.named(name)
animationView.animation = animation
animationView.frame = leftArrow.frame
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
// 可选：强制设置动画的渲染尺寸优先级
animationView.setContentHuggingPriority(.defaultHigh, for: .horizontal)
animationView.setContentHuggingPriority(.defaultHigh, for: .vertical)

5. 对齐Lottie版本 #

确保iOS项目中使用的Lottie框架版本，和导出JSON的Lottie编辑器版本一致。新版本编辑器的特性可能不被旧版框架支持，导致渲染错位。

内容的提问来源于stack exchange，提问作者Michael Montalbano