前情提要
因为要改版我的“存钱猪猪”应用,在应用的启动环境,想要提供一个加载动画,防止让用户存在视觉的卡顿效果。
因此在Gif动画和lottie动画中,选择使用lottie动画作为后续应用动画的首选。
操作流程
配置Xcode
在Xcode中打开对应的项目文件,点击左侧顶部的项目名称,选择选项卡中的PROJECT -> Package Dependencies -> Packages,点击左下角的添加按钮。
![](https://fangjunyu.com/wp-content/uploads/2024/06/1-1.png)
在弹出框中输入下面的Git仓库名称,然后点击“Add Package”按钮。
https://github.com/airbnb/lottie-ios
![](https://fangjunyu.com/wp-content/uploads/2024/06/2-1.png)
等待片刻,安装完成。然后在Add to Target中选择我们的项目,再点击“Add Package”按钮,将lottie添加到我们的项目中。
![](https://fangjunyu.com/wp-content/uploads/2024/06/3-1.png)
配置文件
首先,我们将lottie的json文件导入到我们的项目中,我在这里先创建了一个animation.scnassets文件夹来管理lottie动画文件,右击选择“Add Files to 项目名”。
![](https://fangjunyu.com/wp-content/uploads/2024/06/4.png)
选中对应的lottie动画的json文件,导入到Xcode中。
![](https://fangjunyu.com/wp-content/uploads/2024/06/5.png)
导入后的效果图:
![](https://fangjunyu.com/wp-content/uploads/2024/06/6.png)
创建一个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动画的展示。
完成效果:
![](https://fangjunyu.com/wp-content/uploads/2024/06/RPReplay_Final1717277748.gif)
资源
LottieFiles: https://lottiefiles.com/