[Swift]Lottie/ScrollViewを使用してアニメーションをスライドさせてみよう!!

##はじめに
Swiftの学習を始めたばかり。
学習の記録としてまとめておきます。

##Lottieの導入
アニメーションを表示するためAirbnbが作成したlottie-ios(https://github.com/airbnb/lottie-ios) を使用します。

まず、PodFileに以下のコードを入力して下さい。
pod 'lottie-ios'
そしてターミナルで以下を実行します。
$pod install

最後に該当のViewControllerでLottieをimportします。
import Lottie

##下準備

次に、アニメーションとして再生するファイルを入手します。
今回はLittieFiles(https://lottiefiles.com/) を使用しました。
上サイトから欲しいアニメーションを選択してJSON形式でダウンロードします。

ダウンロードしたら、Xcodeにドラッグ&ドロップで移行しましょう。
##完成品の確認
ここまでで下準備が完了したので、先に完成品を確認しておきましょう。
=> https://noifumi.com/intro.gif
##コードを書く
では実際にコードの解説をしていきます。

###1.JSONFile、animationTextを配列に入れる

LottieFilesから取得したJSONFileに任意の名前をつけ、配列に入れます。
同様にanimationの下部に表示するtextを配列に入れます。

//JSONのfile名
var animationArray = ["swipeToLeft","hello","map","list","timeline"]

//animationの下につけるtext
var animationTextArray = ["左にスワイプしてね!!","こんにちは!!\nこのアプリの紹介をするよ!","まずMap画面から場所を登録して、","List画面で詳細を登録しよう!!","TimeLineで一覧が見れるよ",""]

###2.animationをscrollできるようにscrollViewの準備をする。
今回のscrollViewはスワイプ時ヌルッと次の画面に遷移します。
また、autoLayoutはコードで実装しました。

var scrollView:UIScrollView = {
    let sv = UIScrollView()
    sv.translatesAutoresizingMaskIntoConstraints=false
    return sv
}()

//autoLayout
func setupViews() {
    view.addSubview(scrollView)
                        
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive=true
    scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive=true
    scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive=true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant:0).isActive=true        
    }

scrollView.isPagingEnabled = true

###3.animationを再生する
animationを再生し、scrollViewに反映させているコードです。

func playAnimation(){
    for i in 0...4{ 
        let animationView = AnimationView()
        let animation = Animation.named(animationArray[i])
        animationView.animation = animation
        animationView.frame = CGRect(x: CGFloat(i) * UIScreen.main.bounds.width, y: UIScreen.main.bounds.height / 50 * 10, width: UIScreen.main.bounds.width , height: UIScreen.main.bounds.height / 3)
        animationView.contentMode = .scaleAspectFill
        animationView.loopMode = .loop
            
        animationView.play()
            
        scrollView.addSubview(animationView)
        }
    }

###4.delegateとanimationTextの設定
delegateの設定をして、animationTextを表示させています。

func setUpScroll(){
    scrollView.delegate = self
    scrollView.contentSize = CGSize(width: UIScreen.main.bounds.width * 6, height: UIScreen.main.bounds.height)
        
    for i in 0...4{    
        let animationTextLabel = UILabel(frame: CGRect(x: UIScreen.main.bounds.width * CGFloat(i), y: UIScreen.main.bounds.height / 20 * 10, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height * 3 / 5))            
            
        animationTextLabel.font = UIFont.boldSystemFont(ofSize: 20.0)
        animationTextLabel.textAlignment = .center
        animationTextLabel.text = animationTextArray[i]
        animationTextLabel.numberOfLines = 2
        scrollView.addSubview(animationTextLabel)
        }
    }

###5.最終的なコードはこちら
最後に今回使用したコードを載せておきます。

import UIKit
import Lottie

class IntroViewController: UIViewController,UIScrollViewDelegate {

    var animationArray = ["swipeToLeft","hello","map","list","timeline"]
    var animationTextArray = ["左にスワイプしてね!!","こんにちは!!\nこのアプリの紹介をするよ!","まずMap画面から場所を登録して、","List画面で詳細を登録しよう!!","TimeLineで一覧が見れるよ"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        navigationController?.isNavigationBarHidden = true
        
        scrollView.isPagingEnabled = true
        
        setUpScroll()
        playAnimation()
    }

    var scrollView:UIScrollView = {
        let sv = UIScrollView()
        
        sv.translatesAutoresizingMaskIntoConstraints=false
        return sv
    }()
    
    func setupViews() {
        view.addSubview(scrollView)
                        
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive=true
        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive=true
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive=true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant:0).isActive=true        
    }
    
    func setUpScroll(){
        scrollView.delegate = self
        scrollView.contentSize = CGSize(width: UIScreen.main.bounds.width * 6, height: UIScreen.main.bounds.height)
        
        for i in 0...4{
            let animationTextLabel = UILabel(frame: CGRect(x: UIScreen.main.bounds.width * CGFloat(i), y: UIScreen.main.bounds.height / 20 * 10, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height * 3 / 5))            
            
            animationTextLabel.font = UIFont.boldSystemFont(ofSize: 20.0)
            animationTextLabel.textAlignment = .center
            animationTextLabel.text = animationTextArray[i]
            animationTextLabel.numberOfLines = 2
            scrollView.addSubview(animationTextLabel)
        }
    }
    
    func playAnimation(){
        for i in 0...4{
            let animationView = AnimationView()
            let animation = Animation.named(animationArray[i])
            animationView.animation = animation
            animationView.frame = CGRect(x: CGFloat(i) * UIScreen.main.bounds.width, y: UIScreen.main.bounds.height / 50 * 10, width: UIScreen.main.bounds.width , height: UIScreen.main.bounds.height / 3)
            animationView.contentMode = .scaleAspectFill
            animationView.loopMode = .loop
            
            animationView.play()
            
            scrollView.addSubview(animationView)
        }
    }        
}

これで以上です!

はじめてLottieを使用した際、autoLayoutをstoryboardで実装していました。
しかし、scrollViewと組み合わせると上手く機能しませんでした。
以下をfalseにしたら解決しましたが、ヌルッと動くUIにはなりません。

scrollView.isPagingEnabled = false

結果、コードでautoLayoutを実装する方法を発見したので今回の問題は解決しました。
ただ、storyboardを使用した際に実装できなかった原因がいまだにわかりません。
詳しい方がいらっしゃいましたらご教授ください。