SwiftUI3.0封裝Lottie動畫庫

動畫的json文件從阿里有個設計圖片自己去下載，或者從github找

import SwiftUI import Lottie//SwiftUI 不能直接 使用 Lottie ，需要 橋接 struct LottieView: UIViewRepresentable{//傳入一個名字var name: String!@Binding var play: Intvar animationView = AnimationView.init()//實現 Coordinator 橋接轉化func makeCoordinator() -> Coordinator {//調用 Coordinator 的構造方法，把自身傳進去Coordinator(self)}//MARK: - 寫一個類 初始化成員變量class Coordinator: NSObject{var parentView : LottieViewinit(_ animationView: LottieView){parentView = animationView//最后調用父類super.init()}}func makeUIView(context: Context) -> UIView {let view = UIView.init()animationView.animation = Animation.named(name)animationView.contentMode = .scaleAspectFit // animationView.loopMode = .loop//動畫的循環模式animationView.translatesAutoresizingMaskIntoConstraints = falseview.addSubview(animationView)//添加約束NSLayoutConstraint.activate([animationView.widthAnchor.constraint(equalTo: view.widthAnchor),animationView.heightAnchor.constraint(equalTo: view.heightAnchor),])return view}func updateUIView(_ uiView: UIView, context: Context) {if play < 1000 {animationView.play { _ in}}} }

調用

struct ContentView: View {@State var play: Int = 0var body: some View {VStack{//Boat_Loader//IconTransitions//SwitchLottieView(name: "Switch", play: $play).frame(width: 200, height: 400)Button {play += 1} label: {Text("播放").font(.largeTitle.bold()).foregroundColor(.black)}}} }

總結

以上是生活随笔為你收集整理的SwiftUI3.0封装Lottie动画库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。