【なんとなくSwift その2】最高のアニメーション実装ライブラリ、Lottie

みなさんLottieというライブラリを知ってますか?
LottieはスマホアプリやWebサイトで簡単にアニメーションを簡単に表示できるようになります。今回はiosアプリでの実装方法をご紹介します。

この記事を読んでできるようになること。

  • iosアプリでLottieを使ってアニメーションを実装できるようになる
  • ちょっとだけ表情豊かなアプリを造れるようになる

Lottieについて

LottieとはAirbnbが提供しているAfter Effectで作成したアニメーションを、スマホアプリやWebサイトで表示できるオープンソースライブラリです。

実装手順

実装手順はこんな感じです。

  1. プロジェクトにLottieをインストール(インストールされるバージョンは3.0.4です。)
  2. After Effectでアニメーション作成(この記事ではご説明しません。)
  3. After Effectのプラグインで、作成したアニメーションをJson形式に変換
  4. 作成したJsonをプロジェクトに配置、実装
  5. アニメーション表示!

それでは順番にご説明いたします。

プロジェクトにLottieをインストール

Cocoapodsを使ってLottieをインストールします。

ターミナルを開いてプロジェクトファイルがあるフォルダに移動し、以下のコマンドを実行してください。*Cocoapodsのインストール方法は割愛します。

pod init

プロジェクトファイルがあるフォルダにPodfileが作成されますので、Podfileを開いて以下のようにpod ‘lottie-ios’と入力し、保存してください。

target 'Lottie-Sample' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  pod 'lottie-ios'
  # Pods for Lottie-Sample

  target 'Lottie-SampleTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'Lottie-SampleUITests' do
    inherit! :search_paths
    # Pods for testing
  end

end

またターミナルで以下のコマンドを実行してください。

pod install

Pod installation complete!と表示されたらインストール成功です!

一応インストールできているか確認しておきましょう

インストールが成功したらプロジェクトファイルのあるフォルダにxcworkspaceという拡張子のファイルが作成されます。xcworkspaceファイルを開いてください。*Cocoapodsでライブラリをインストールした後はxcworkspaceファイルで開発を行うことになりますので、ご注意ください。

ViewController.swiftにimport Lottieと入力してビルド、エラーがなければOKです。

After Effectのプラグインで、作成したアニメーションをJson形式に変換

BodymovinというAfter EffectのプラグインをインストールしてJsonファイルを作成します。

まずGithubでClone or downloadからZipファイルをダウンロードしましょう。

ダウンロードしたらZipファイルを解凍しましょう。以下のパスにBodymovingがあります。

  • lottie-web-master/build/extension/bodymovin.zxp

Zxpインストーラーを使ってbodymovingをインストールします。

After Effectの設定を変更します。
PreferencesのScripting & Expressions内にあるAllow Scripts to Write and Access networkにチェクをつけましょう。

それではJsonに変換します。WindowタブのExtensions内にあるBodymovingを選択してください。

出力場所とJsonファイル名を決めてRenderをクリックしましょう

Renders Finishedと表示されたら成功です!

作成したJsonをプロジェクトに配置、実装

今回はボタンを押したら、アニメーションが表示される簡単な実装を行って行きます。

作成したJsonファイルをプロジェクトに配置します。

以下実装です。

import UIKit
import Lottie

class ViewController: UIViewController {

    @IBOutlet weak var startButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        startButton.layer.borderWidth = 2
        startButton.layer.borderColor = UIColor(red: 226/255, green: 54/255, blue: 117/255, alpha: 1.0).cgColor
        startButton.layer.cornerRadius = 10.0
    }
    
    
    @IBAction func start(_ sender: Any) {
        let animationView = AnimationView(name: "sample")
        animationView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
        animationView.center = self.view.center
        animationView.animationSpeed = 1
        animationView.loopMode = .loop
        
        self.view.addSubview(animationView)
        animationView.play()
    }
    

}

アニメーション表示!

こんな感じで表示できました。Lottie最高です!

ふじさん

直感で動くシステムエンジニアです。
アプリ開発, 人工知能, デザインなど
面白い!必要だ!
と思ったものはなんでも手を出します。

Swift, Flutter, Python, illustrator, photoshop, After effectsを中心に触っています。

関連記事

  1. Dropbox APIの巻

  2. 【なんとなくSwift その3】UserDefaults使ってデータを保存しよう

  3. 【セキュリティは】AWSのMFAを有効化しよう その2【ご安全に】

  4. 【セキュリティは】AWSのMFAを有効化しよう その1【ご安全に】

  5. Dropboxの巻 レスポンス編

  6. iOSアプリ「予定メモ」をリリースしました。

  7. ロードマップ

  8. GW真っ最中

PAGE TOP