lottie-iosを使って、アニメーションレイヤーにサブビューを追加する


# Lottieとは

Lottieは言わずと知れたアニメーションライブラリで、数行のコードでリッチなアニメーションを実装できます。

Lottieファイルと言われる、[Adobe After Effects](https://www.adobe.com/products/aftereffects.html)から生成されたJSONファイルを、読み込み、アニメーションを表示させるためのライブラリです。

いわゆるビデオプレイヤー的な役割をするもので、Lottieファイルを読み込ませると、様々なリッチアニメーション実現できます。

# 導入

今回はcocoapodを使用します。Podfileに以下ラインを追加し、`pod install`を実行

```
pod 'lottie-ios'
```

# Lottieファイルをダウンロード

[こちら](https://lottiefiles.com/)より、好きなファイルを落としてください。今回のデモでは[スケボーにいさん](https://lottiefiles.com/41256-skateboarding)を使います。

![Screen Shot 2020-12-13 at 1.08.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102821/910cb63b-3fd0-429f-c01b-15aa9fd79bf4.png)


# 基本実装

まずは先ほどDLしたLottieファイルをプロジェクトに取り込んでください。


のちに、ViewController.swiftに以下コードを追加ます。

```swift
import UIKit
import Lottie

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    // play lottie file
    let animationView = AnimationView(name: "41256-skateboarding")
    animationView.frame = view.bounds
    animationView.loopMode = .loop
    animationView.contentMode = .scaleAspectFit
    view.addSubview(animationView)
    animationView.play()
  }
}
```
![lottie-ios-simulator.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102821/7e64604a-0367-daac-27e9-592ddaea12ed.gif)

# レイヤーにサブビューを追加する

Lottieの凄いところは、ただアニメーションを再生するだけでなく、指定のアニメーションレイヤーにサブビューも追加できると言うところです。[ドキュメント](http://airbnb.io/lottie/#/ios?id=adding-subviews)

Lottieアニメーションは複数のアニメーションレイヤーからなり、それぞれのレイヤーが動くことで、リッチアニメーションを実現しています。そのレイヤーにサブビューを追加することで、サブビューをレイヤーの一部としてをアニメーションさせてることができます。

[Lottie Editor](https://lottiefiles.com/editor)で、先ほどDLしたファイルを読み込んでみましょう。

![lottie-editor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102821/8c905947-1941-1559-9ade-032394ee0e86.png)

左側に見えるのがレイヤーです。実装段階でレイヤー名が必要になります。

# 実装

今回は、スケボー兄さんの顔を置き換えてみましょう。ドキュメントにある通り、どのレイヤーにサブビューを追加するかを決めないといけません。今回は顔を置き換えるということで、レイヤー ***“head”*** にサブビューを追加します。

```swift
import UIKit
import Lottie

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    // play lottie file
    let animationView = AnimationView(name: "41256-skateboarding")
    animationView.frame = view.bounds
    animationView.loopMode = .loop
    animationView.contentMode = .scaleAspectFit
    view.addSubview(animationView)
    
    // add label to replace face
    let path = AnimationKeypath(keypath: "head")
    let faceSubview = AnimationSubview()
    let faceLabel = UILabel()
    faceLabel.backgroundColor = .white
    faceLabel.frame = CGRect(x: -50, y: -450, width: 200, height: 200)
    faceLabel.text = "(ﾟωﾟ)"
    faceLabel.textAlignment = .center
    faceLabel.layer.cornerRadius = 100
    faceLabel.clipsToBounds = true
    faceLabel.font = UIFont.boldSystemFont(ofSize: 60)
    faceSubview.addSubview(faceLabel)
    animationView.addSubview(faceSubview, forLayerAt: path)
    
    animationView.play()
  }
}
```

![lottie-replace-face.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102821/da23d061-b7d2-cdc3-48e6-00ae611a4a95.gif)

見事に顔が置き換えられ、動きに合わせ、新しい顔の位置、角度まで変わっていますね！

「x, y座標が固定になってるけど、アニメーションのフレームサイズ変われば顔の位置ずれるのでは？」と思った方もいると思います。

僕もそこは気になっていたのですが、その心配はありませんでした。どのフレームサイズでも、顔の位置がずれることはありませんでした。

ユーザーのプロフィール画像を組み込んだアニメーションを作ったり、いろいろなことに応用できると思います。

# 最後に

Lottieに関して[こちら](https://watarumaedablog.com/lottie-ios/)でもう少し詳しくかいたので、興味ある方は覗いてみてくれると嬉しいです。

Happy Coding!