将LottieFiles的AnimationView附加到预设UIView时显示异常如何解决

问题原因 #

• 现有代码将AnimationView直接添加到控制器根视图，没有挂载到预设的weatherAnimationView容器上
• 硬编码固定frame无法适配容器布局和不同屏幕尺寸，导致位置错乱

修正代码 #

let animationView = AnimationView()
@IBOutlet var weatherAnimationView: UIView!
func startAnimation() {
    animationView.animation = Animation.named("cloudy")
    animationView.contentMode = .scaleAspectFit
    animationView.loopMode = .loop
    // 挂载到预设容器视图
    weatherAnimationView.addSubview(animationView)
    // 配置自动布局，跟随容器大小自适应
    animationView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        animationView.topAnchor.constraint(equalTo: weatherAnimationView.topAnchor),
        animationView.leadingAnchor.constraint(equalTo: weatherAnimationView.leadingAnchor),
        animationView.trailingAnchor.constraint(equalTo: weatherAnimationView.trailingAnchor),
        animationView.bottomAnchor.constraint(equalTo: weatherAnimationView.bottomAnchor)
    ])
    animationView.play()
}

优化建议 #

• 若startAnimation会被多次调用，可将子视图添加、约束配置逻辑移到viewDidLoad中执行，避免重复添加子视图
• 也可直接在Interface Builder中将weatherAnimationView的自定义类指定为AnimationView，直接将IBOutlet关联为AnimationView类型，省去手动添加子视图的步骤

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