f:id:vasilyjp:20180927090637j:plain

こんにちはフロントエンジニアの茨木です。一ヶ月ほど前からSwiftでiOSアプリ開発をやっています。iOS開発経験は浅いですが、Lottieというライブラリを使用し、いきなりアニメーションごりごりの画面を担当してみました。 LottieはAirbnb社が開発したライブラリで、僅かなコードでアニメーションを実装できるスグレモノです。本記事では、SwiftにおけるLottieの使い方を説明します。

Lottieの特徴

Lottieの最も大きな特徴は、Adobe After Effectsで出力したアニメーションデータをそのまま読み込むだけでアニメーションを実装できることです。その為、沢山のコードや画像が不要なのはもちろんのこと、デザイナーが作ったアニメーションを忠実に再現することが可能です。更に、LottieはAndroidやReact Nativeもサポートしているので、クロスプラットフォームでアニメーションを再利用することもできます。

Lottieの導入方法

アニメーションデータの出力

Lottieでアニメーションデータを読み込むには、Adobe After Effectsの拡張機能Bodymovinを使ってJSON形式で出力する必要があります。出力の詳細な手順はここでは割愛します。また、LottieはAfter Effectsの全機能をサポートしているわけではないので注意が必要です。詳しくはこちらをご覧ください。

アニメーションの実装

とりあえず実装してみる

出力したJSONファイルをXcodeプロジェクト内の任意の場所に置き、アニメーションを実装したいViewControllerにコードを4行追加するだけです。

import UIKit
// ライブラリをインポート
import Lottie

final class LottieExampleViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // アニメーションのviewを生成
        let animationView = LOTAnimationView(name: "heartAnimation.json")

        // ViewControllerに配置
        self.view.addSubview(animationView)

        // アニメーションを開始
        animationView.play()
    }
}

LOTAnimationView(name: String)の引数nameにはJSONのファイル名を指定します。拡張子はなくても問題ありませんが、ファイル名にパスを含めてしまうと読み込みに失敗します。また、外部データを取得する場合はLOTAnimationView(name: String)の代わりにLOTAnimationView(contentsOf: URL)を使います。

LOTAnimationViewについて

LOTAnimationViewはUIViewを継承しており、デフォルトの幅・高さはアニメーションの幅・高さと同じになります。LOTAnimationViewは、通常のviewのようにframeやAutoLayoutでレイアウトしたり、contentModeでビュー内のコンテンツ配置を調整したりできます。更に、LOTAnimationViewにはアニメーションに関する様々なオプションがあり、ループや速度の設定が可能です。設定できるオプションは以下のようなものがあります。

LOTAnimationViewのプロパティ	詳細
animationDuration: CGFloat { get }	アニメーションの開始から終了までの時間を取得できます。
animationProgress: CGFloat { get set }	開始を0.0、終了を1.0とした場合のアニメーションの経過時点を取得/指定できます。値を指定した場合、指定時点で静止したアニメーションが表示されます（isAnimationPlayingがtrueの間は指定しても静止しません）。
animationSpeed: CGFloat { get set }	元の速度を基準としたアニメーションの速度を取得/指定できます。
loopAnimation: Bool { get set }	アニメーションのループの有無を取得/指定できます。
isAnimationPlaying: Bool { get }	アニメーションが動作中かどうかを取得できます。

実装例

「いいね！」をタップした時などに出てきそうなハートのアニメーションを実装してみた例です。

f:id:vasilyjp:20170809121123g:plain

このようなアニメーションも、Lottieを使えばレイアウトの調整含め5行ぐらいのコードで実装できます。

まとめ

Lottieによりアニメーションの実装コストが大幅に削減されました。更に、デザインに忠実なアニメーションの実装が可能になりました。とても便利なライブラリなので、読者の皆様も一度試してみることをオススメします。Lottie用のアニメーションはLottieFilesでダウンロードすることもできるので、アニメーションを作るのはちょっと…という方も是非試してみて下さい。