Xcode集成lottie动画

前情提要

因为要改版我的“存钱猪猪”应用，在应用的启动环境，想要提供一个加载动画，防止让用户存在视觉的卡顿效果。

因此在Gif动画和lottie动画中，选择使用lottie动画作为后续应用动画的首选。

操作流程

配置Xcode

在Xcode中打开对应的项目文件，点击左侧顶部的项目名称，选择选项卡中的PROJECT -> Package Dependencies -> Packages，点击左下角的添加按钮。

在弹出框中输入下面的Git仓库名称，然后点击“Add Package”按钮。

https://github.com/airbnb/lottie-ios

等待片刻，安装完成。然后在Add to Target中选择我们的项目，再点击“Add Package”按钮，将lottie添加到我们的项目中。

配置文件

首先，我们将lottie的json文件导入到我们的项目中，我在这里先创建了一个animation.scnassets文件夹来管理lottie动画文件，右击选择“Add Files to 项目名”。

选中对应的lottie动画的json文件，导入到Xcode中。

导入后的效果图：

创建一个LottieView视图文件，具体代码如下：

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    var filename: String
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView(frame: .zero)
        
        // 创建 Lottie 动画视图
        let animationView = LottieAnimationView(name: filename) // 使用 LottieAnimationView 而不是 AnimationView
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        animationView.play()
        
        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)
        
        NSLayoutConstraint.activate([
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
        ])
        
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
}

最后，我们在视图中使用：

LottieView(filename: "loading") // 替换为你的 Lottie 文件名

代码进行lottie动画的展示。

完成效果：

资源

LottieFiles: https://lottiefiles.com/