前言

更多技術整理，歡迎關注本人博客www.tomtwos.com

在本文中，我將向你展示如何通過CoacoaPods和Swift Package Manager兩種方法從Github獲取Lottie工程包，并將Lottie動畫添加到SwiftUI APP。

0 準備工作

關于Lottie、CocoaPods、SPM，此處不多做介紹，需要了解相關概念及使用方法

• lottie官網

Lottie Docs

• lottie-ios項目 github地址

airbnb/lottie-ios

• LottieFiles：一個下載JSON格式動畫的網站

LottieFiles - Free animation files built for Lottie

1 Xcode新建SwiftUI項目

有手就行的操作，此處不做介紹

2 通過CocoaPods安裝Lottie（二選一）

1. 打開終端進入項目目錄，運行$ pod init生成一個Podfile
2. 打開Podfile，向Podfile添加pod 'lottie-ios'，然后打開終端進入項目目錄，運行pod install，安裝成功后直接使用import Lottie使用Lottie

2 通過SPM安裝Lottie（二選一）

Github官方源：https://github.com/airbnb/lottie-ios.git

若國內訪問不了，使用我的碼云源：https://gitee.com/gaozichen2012/lottie-ios.git

第一步：File→Swift Packages→Add

第二步：添加第三方庫的鏈接

第三步：設置項目的Dead Code Stripping

在項目中的Build Settings中的Dead Code Stripping修改為NO，然后直接使用import Lottie使用Lottie

（此步驟在https://github.com/airbnb/lottie-ios的項目介紹中有說明，是為了規避一個BUG）

3 添加一個JSON格式的Lottie動畫

向工程添加love.json文件，我這里使用的"love.json"是從阿里犸良生成的一個JSON動畫

（JSON動畫可在阿里-犸良動畫設計平臺生成下載，或者在LottieFiles 直接下載JSON動畫）

4 添加文件LottieView.swift

在LottieView.swift中import Lottie

//  LottieView.swift

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    var name: String!
    @Binding var play:Int
    
    var animationView = AnimationView()

    class Coordinator: NSObject {
        var parent: LottieView
    
        init(_ animationView: LottieView) {
            self.parent = animationView
            super.init()
        }
    }

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView()

        animationView.animation = Animation.named(name)
        animationView.contentMode = .scaleAspectFit

        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: UIViewRepresentableContext<LottieView>) {
        animationView.play()
    }
}

5 修改文件ContentView.swift

修改ContentView.swift ，調用LottieView并傳入"love.json"動畫

//ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var play = 0
    
    var body: some View {
        VStack{
            //向LottieView函數傳入"love.json"動畫
            LottieView(name: "love", play: $play)
                .frame(width:100, height:100)
            Button("Play"){ self.play += 1 }
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

6 測試

編譯后預覽，點擊play即可播放動畫

完整項目代碼見Github：gaozichen2012/lottie-ios-test