Lottie Filesの使い方

色々と面白いアニメーションを使えるライブラリなので忘備用に記録します。

1: テキトーにプロジェクトを作成する

2: ターミナルを開き、pod initでポッドファイルを作成

3: pod fileに[pod 'lottie-ios']を記述してpod installを行う

4: LottieFilesのサイトからテキトーにアニメーションを選んで"Lottie JSON"を選んで保存する

サイト:

https://lottiefiles.com/

画像1


5: ダウンロードしたファイルをプロジェクトに入れる

ファイルの名前はわかりやすいものに変更しておく(今回は"running.json"としました)

画像2


6: viewController内に以下コードをコピペ

*let animationView = AnimationView(name: "running")の"running"箇所は自分の保存したJSONファイルの名前にしてください

ex: "baseball.json"というファイルだったらlet animationView = AnimationView(name: "baseball")とすればOK

import UIKit
import Lottie

class ViewController: UIViewController {
   override func viewDidLoad() {
       super.viewDidLoad()
       showAnimation()
   }
   
   func showAnimation() {
       let animationView = AnimationView(name: "running")
       animationView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
       animationView.center = self.view.center
       animationView.loopMode = .loop
       animationView.contentMode = .scaleAspectFill
       animationView.animationSpeed = 1
       view.addSubview(animationView)
       animationView.play()
   }
   
}


7: ここまで出来たら一度ビルドをする、画像の様に表示されたら成功です(実際はアニメーションが動いています)

画像3


○今回は、

animationView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)

で画面いっぱいにアニメーションを表示していますが上記のコードをいじれば表示サイズを色々と変更出来ます


以上です

いいなと思ったら応援しよう!