Lottieでアニメーションしてみた

iosでのアニメーションはUIKitやCoreAnimationなどで実装することができますが、デザイナーの方が作ってくれたかっこいいアニメーションを実装するにはだいぶ工数がかかってしまうことがあります。

しかも一部アニメーションがちょっと違う動きをしてしまうことなんかも…

そんな時はLottieというライブラリを使うのが良いようです。AfterEffectで作成したファイルをjsonで吐き出して読み込ませることでiosでもandroidでもreactでも簡単に使うことができます。

導入

cocoapodで入れる場合はこれだけです！

pod 'lottie-ios'

Lottieの導入記事は古いものが多くBridgeingHeaderに追加する必要があるみたいなものがおおいですが必要ありません！

lottie-ios

アニメーションのサンプルファイル

デザイナーが近くにいない場合、私もそうですが試すサンプルはLottieFilesというサイトにたくさん置いてあります。

使いたいアニメーションのファイルを見つけたらDownloadボタンでローカル環境にダウンロードし、Xcodeプロジェクトにドラップアンドドロップで入れるだけで使えます。

実装

アニメーションを画面中心で表示させるコードです！これだけでアニメーションが動きます。

注意点としてはAnimationViewの引数に渡す文字列ですが、.jsonを含めるとうまく動いてくれないので拡張子を除いたファイル名だけを記述する必要があります。

       let animationView = AnimationView(name: "hoge")
　　　　　//表示位置
        animationView.layer.position = CGPoint(x: self.view.frame.width/2, y: self.view.frame.height/2)
        //ループの設定
        animationView.loopMode = .loop
        self.view.addSubview(animationView)

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

アニメーション終了のハンドリング

終了のハンドリングはplayの部分で取得することができます。

animationView.play{ (finished) in
//終了時に行いたい処理
}

アニメーション終了のタイミングでviewを削除したい場合、stopメソッドやwillRemoveSubView()を呼び出してもアニメーションしていたパーツの一部が残ってしまいます。

なので非表示にしたい場合はviewのalphaの値を変更して非表示にするのが良いと思います。

参考文献

Lottieでアプリにアニメーションを組み込む話（iOSプログラマー編）

Contents

Lottie Files