Xcode集成lottie动画
Xcode集成lottie动画

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/

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注