iOS
animation
Swift

iOSでlottie-iosを使ってリッチなアニメーションを簡単に実現してみる

最近のイケてるiOSアプリはアニメーションが入っているものが多いが、リッチなアニメーションを入れるには結構めんどうだったりする。Airbnbが出しているlottie-iosというライブラリが非常に簡単で使いやすくてよかった。

lottieとは

lottie
Adobe After Effectsで作ったアニメーションをjsonに変換してそれをそのまま読み込ませてアプリ(iOS, Android, React Native)に組み込むAirbnbが出しているアニメーションライブラリ。ここではjsonを作成するところには触れずに、iOSで表示するところにフォーカスする。ここに色々とサンプルが上がっているので、このサイトのものを利用してみる。下にある感じのアニメーションがアプリに簡単に組み込める。githubにあるlottie-iosというライブラリはstarも10000近くついており(2017/8/17時点で9948)かなり人気である。

lottie.gif

インストール

  • Podならpod 'lottie-ios'をPodfileに加えて、pod install
  • Carthageならgithub "airbnb/lottie-ios" "master"をCartfileに加えて、carthage update。Linked Frameworks and Librariesの設定等も済ませる。

Swiftでこのライブラリを利用するので、Bridging-Headerファイル(なければ作成して、Build Settingに設定を付け足す必要がある)に#import <Lottie/Lottie.h>と追加する必要があるので注意。

LottieSample-Bridging-Header.h
#ifndef LottieSample_Bridging_Header_h
#define LottieSample_Bridging_Header_h

#import <Lottie/Lottie.h>

#endif /* LottieSample_Bridging_Header_h */

基本的な使い方

ここから試してみたいアニメーションのファイルを選択してjsonファイルをダウンロードする。Xcodeのプロジェクトに、ダウンロードしてきたjsonファイルを追加する。
今回はこのアニメーションを入れてみる。ダウンロードして、Animation.jsonという名前にしてXcodeに追加した。

lottie2.gif

ViewController.swift
import UIKit
import Lottie

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        showAnimation()
    }

    func showAnimation() {
        let animationView = LOTAnimationView(name: "Animation")
        animationView.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height)
        animationView.center = self.view.center
        animationView.loopAnimation = true
        animationView.contentMode = .scaleAspectFit
        animationView.animationSpeed = 1

        view.addSubview(animationView)

        animationView.play()
    }

}

こんな感じになる。
lottie4.gif

一回再生したら消したい

animationView.loopAnimation = falseにして、animationView.play()にcompletionHandlerを渡すように書き換える。

ViewController.swift
import UIKit
import Lottie

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        showAnimation()
    }

    func showAnimation() {
        let animationView = LOTAnimationView(name: "Animation")
        animationView.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height)
        animationView.center = self.view.center
        animationView.loopAnimation = false
        animationView.contentMode = .scaleAspectFit
        animationView.animationSpeed = 1

        view.addSubview(animationView)

        animationView.play { finished in
            if finished {
                animationView.removeFromSuperview()
            }
        }
    }

}

任意のタイミングで終了させたい

LOTAnimatinViewを任意のタイミングでremoveFromSuperview()すればよい。

ViewController.swift
import UIKit
import Lottie

class ViewController: UIViewController {

    lazy var loadingView: LOTAnimationView = {
        let animationView = LOTAnimationView(name: "Animation")
        animationView.frame = CGRect(x: 0, y: 0, width: self.view.bounds.width, height: self.view.bounds.height)
        animationView.center = self.view.center
        animationView.loopAnimation = true
        animationView.contentMode = .scaleAspectFit
        animationView.animationSpeed = 1

        return animationView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    // 好きなタイミングでこれを呼ぶとアニメーションが始まる.
    func startLoading() {
        view.addSubview(loadingView)
        loadingView.play()
    }

    // 好きなタイミングでこれを呼ぶとアニメーションのViewが消える.
    func stopLoading() {
        loadingView.removeFromSuperview()
    }

    //// APIコールとかでstartLoading(), stopLoading()を呼ぶ.

}

まとめ

githubにあげておきました。

自分でjsonから作り出すのは少し手間がかかるが、すでに上がっているアニメーションは簡単に組み込めて楽しい。遊んでみてください。