SwiftでLottieを使ってアニメーションを実装する

こんにちはフロントエンジニアの茨木です。一ヶ月ほど前から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でダウンロードすることもできるので、アニメーションを作るのはちょっと…という方も是非試してみて下さい。

最後に

VASILYではやったことないことにも果敢にチャレンジできるようなエンジニアを募集しています。 興味がある方はこちらからご応募ください。