アニメーションを簡単に追加できる【Lottie】を使ってみた

Lottieとは

作成したアニメーションをjsonファイルに変換して、それをアプリに組み込むことができるライブラリです。

多くのアニメーションが公開されており、既存アニメーションのjsonファイルをダウンロードすることができます。

会員登録が必要ですが、無料でも多くのアニメーションを使用することができます。

登録、アニメーションの検索、jsonファイルのダウンロードはこちら。

完成図

今回の記事では、以下のような動きを目指します。

フレームワークのインストール

podfileに以下を追加して、pod installを実行しましょう。

pod 'lottie-ios'

アニメーションを表示したいClassにインポートします。

import Lottie

アニメーションを表示してみる

表示したいアニメーションのjsonファイルを、Lottieのサイトからダウンロードします。

ここで使用しているアニメーションはこちら。

取得したファイルをXcode上に追加します。

xibファイルでUIViewを設置し、swiftファイルに紐付けます。

class TopViewController: UIViewController {
    @IBOutlet weak var heartView: UIView!

    //AnimationViewを宣言
    var animationView = AnimationView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //UIViewにアニメーションを追加
        addAnimationView()
    }
    //UIViewにアニメーションを追加する関数
    func addAnimationView() {
        animationView = AnimationView(name: "7805-hearts")
        animationView.frame = CGRect(x: heartView.bounds.minX, y: heartView.bounds.minY, width: heartView.frame.width, height: heartView.frame.height)
        heartView.addSubview(animationView)
        animationView.play()
    }
}

addAnimationView関数の１行目の、「AnimationView(name: “”)」の引数には、jsonファイルのファイル名を入れてください。

ただし、拡張子（.json）は要りません。

任意のタイミングでアニメーションを開始する

Buttonがタップされたタイミングでアニメーションを開始したい場合は、下記のような書き方になります。

class TopViewController: BaseViewController {
    @IBOutlet weak var heartView: UIView!
    @IBAction func touchedAnimationButton(_ sender: UIButton) {
        animationView.play()
    }
    //AnimationViewを宣言
    var animationView = AnimationView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //UIViewにアニメーションを追加
        addAnimationView()
    }
    //UIViewにアニメーションを追加する関数
    func addAnimationView() {
        animationView = AnimationView(name: "HeartAnimation")
        animationView.frame = CGRect(x: heartView.bounds.minX, y: heartView.bounds.minY, width: heartView.frame.width, height: heartView.frame.height)
        heartView.addSubview(animationView)
    }
}

アニメーションが一回終わったら、Viewを消す

アニメーションが終わった時点でそのViewを消したい場合は、ボタンがタップされた時の処理を下記の様に変更します。

 @IBAction func touchedAnimationButton(_ sender: UIButton) {
    addAnimationView()
    animationView.play { finished in
        if finished {
            self.animationView.removeFromSuperview()
        }
    }
}

いかがでしたでしょうか。

アニメーションを１から作ってアプリに使用するのはとても時間がかかりますよね。

Lottieを使えばアニメーション作成の手間を簡単に削減できるのでオススメです。

ABOUT ME

伊原 萌夏

スクール担当 兼 iOS(時々Web)エンジニア。 2019年7月に大学を一年半で辞め、大学とは別で勉強していたプログラムの世界で生きていくことを決意。翌月8月に入社。 主にSwiftのスクールを担当。