Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
80
Help us understand the problem. What is going on with this article?
@ngo275

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

More than 1 year has passed since last update.

最近のイケてる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時点で99482020年3月24日時点で 19.2k )かなり人気である。

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>と追加する必要があるので注意。 LottieのVersion3以降は完全にSwiftで記述されており、この処理は必要ない(追記:2020年3月24日)。

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 = AnimationView(name: "Animation")
        animationView.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height)
        animationView.center = self.view.center
        animationView.loopMode = .loop
        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 = AnimationView(name: "Animation")
        animationView.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height)
        animationView.center = self.view.center
        animationView.loopMode = .loop
        animationView.contentMode = .scaleAspectFit
        animationView.animationSpeed = 1

        view.addSubview(animationView)

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

}

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

LOTAnimatinView AnimationView(追記:2020年3月24日)を任意のタイミングでremoveFromSuperview()すればよい。

ViewController.swift
import UIKit
import Lottie

class ViewController: UIViewController {

    lazy var loadingView: AnimationView = {
        let animationView = AnimationView(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.loopMode = .loop
        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から作り出すのは少し手間がかかるが、すでに上がっているアニメーションは簡単に組み込めて楽しい。遊んでみてください。

80
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ngo275
フルスタックめなエンジニアやっています

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
80
Help us understand the problem. What is going on with this article?