LottieでかんたんリッチなアニメーションをiOSのViewにもたらす

話題のアニメーションライブラリLottieの導入法をイチから解説。
これであなたのアプリもめっちゃモダンでかわいくなります。
ボタン類も豊富に用意されています。
![Oct-27-2020 00-01-19.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/4f65dda5-5388-14e1-0ecd-954d37f3608e.gif)

#導入方法

( SwiftPackageManagerバージョンです。手順通りにやれば大丈夫です）

Lottieを導入したいXcodeプロジェクトをひらきます。
**Build Settings** の **Linking** から **Dead Code Stripping** を **No** にします。
![スクリーンショット 2020-10-26 21.33.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/95b2be29-3fce-f184-2ac6-0bda2d5b90d4.png)

**File** > **Swift Packages** > **Add Package Dependency**を選択します。
![スクリーンショット 2020-10-26 21.08.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/3fc7e729-00e5-ed80-b731-a4e33eb59301.png)

**Repository**にLottieのGitHub URL： https://github.com/airbnb/lottie-ios をコピペします。
そして**Next**。
![スクリーンショット 2020-10-26 21.26.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/03052619-30f8-e350-c9f7-35ad53ca9239.png)

ブランチなどもそのままで**Next**。
![スクリーンショット 2020-10-26 21.26.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/ef2d3d5c-b4e3-4de4-6402-02a51b3fe18a.png)

**Finish** で Lottie フレームワーク がプロジェクトに入ります。
![スクリーンショット 2020-10-26 22.05.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/c837f4f5-12f9-eca8-51b6-b33beb98896a.png)

#使用方法
###Lottie アニメーションのJsonファイルを取得
[LottieのHP](https://lottiefiles.com/)からLottie JSON をダウンロード。
![スクリーンショット 2020-10-26 23.01.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/a974b2a6-c51f-275b-e70c-02d240c025ce.png)


プロジェクトにドラッグ＆ドロップ。
（ファイル名は好きな名前.jsonに変えて大丈夫）
![スクリーンショット 2020-10-27 0.13.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/95645d36-2baf-6bc6-f120-f40d1119921e.png)


###Animation View を追加
Lottie をインポートします。

```swift

import Lottie
```
Lottieアニメーションビューを初期化します。
UIViewと同じようにあつかえます。

```swift
var animationView = AnimationView()
animationView.frame = view.frame
animationView.contentMode = .scaleAspectFit
view.addSubview(animationView)
```
###Animationを初期化して再生

```swift
var animation = Animation.named("36596-the-woman-sitting-on-the-phone")
// JSONファイルをフォルダにまとめている場合は、 var animation = Animation.named("36596-the-woman-sitting-on-the-phone", subdirectory: "Animations")
animationView.animation = animation
animationView.play()
```
![Oct-26-2020 23-05-26.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/e73b41be-0588-6a6e-45b2-7c2606e04da1.gif)
背景透過で再生されました。

###オプション

#####animationView.stop( )　：停止
#####・animationView.pause( ) ：一時停止

#####animationView.loopMode　：ループモード（Default：.playOnce）

| オプション |　挙動|
|---|---|
|.playOnce|一度だけ再生 |
|.loop|ループ再生 |
|.autoReverse|再生・逆再生を繰り返す|
|.repeat(Float)|指定回数繰り返し|
|.repeatBackwards(Float)|指定回数再生・逆再生|

#####animationView.backgroundBehavior　：アプリがバックグラウンドになった時のアニメーションの挙動

| オプション |　挙動|
|---|---|
|.pause|一時停止状態で止まる |
|.pauseAndRestore|一時停止状態で止まり、アプリがフォーグラウンドになるとそこから再生 |
|.stop|アニメーションの冒頭に移動 |
|.forthFinish|アニメーションの末尾に移動 |

#####animationView.play(fromProgress:), animationView.play(toProgress:)　：アニメーションの範囲を指定（０〜１）


#自前のアニメーションを作る
[デザイナー向けチュートリアル](https://lottiefiles.com/getting-started)で　After Effect というソフトを使ってLottieアニメーションを作る方法を学べるそうです。

また、一から作るところまでは行かなくても、既存のLottieアニメーションを[Lottieエディタ](https://lottiefiles.com/editor)にドロップして編集できます。

[公式サイト](https://lottiefiles.com/)では、無料・有料アニメーションはじめ、Webに埋め込む方法などたくさん情報があります。
![Oct-26-2020 23-56-40.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/1ec32bac-78dd-98ca-849c-87a742b78eb9.gif)

🐣
****
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)