LottieアニメーションをTableViewCell内で動かしてみた

はじめに

・Swift愛好会 AdventCalendar 2017の9日目の記事です。
・Airbnbが開発したアニメーションライブラリのLottieを使って、TableViewのCell内でアニメーションさせるぞい！という趣旨です

・今回使ってみたのはこちら

開発環境

・Xcode ver9.1
・Swift ver4.0.2
・lottie-ios ver2.1.0

作ったヤツ

※日課メーターに鋭意実装中のためまだ公開できるソースはありません🙇
今月中にはgithubにあげますゴメンなさい🙇 🙇
→上げました！ https://github.com/tony1224/LottieAnimationSample

処理抜粋

HogeCell.swift

    var anim = LOTAnimationView!

    // 既存のチェックボックス部品
    @IBOutlet private weak var checkbox: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()

        anim = LOTAnimationView(name: check_done)

        /**
         * サイズ設定事情
         * lottieファイルのサイズがでかかったため、既存の部品(checkbox)にねじ込んでます(暫定対応)
         */
        anim.frame = CGRect(x: 0, y: 0, width: 120, height: 120)
        anim.contentMode = .scaleAspectFit
        anim.center = checkbox.center

        checkbox.addSubview(anim)
    }

    // 表示処理(cellForRowで呼ばれる)
    func setData(fuga: Fuga) {
        titleLabel.text = data.title

        if fuga.isDone {
            // チェック済の場合、progress値を最大値にしてアニメーション後を表現
            anim.animationProgress = 1.0
        } else{
            // 未チェックの場合、明示的にアニメーションを停止状態にする
            anim.stop()
            }
        }
    }

    func animateCheckbox() {
        self.anim.play()
    }
    
    func stopAnimCheckbox() {
        self.anim.stop()
    }

ViewController.swift

    // 各セルに表示したいデータのリスト
    private var todoList = [Todo]()

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let currentTodo = self.todoList[indexPath.row]
        let title = currentTodo.title
        let isDone = !currentTodo.isDone
        let newTodo = Todo(title: title, isDone: isDone, index: indexPath.row)
        
        // 対象のCellを取得しAnim実行
        let cell: LottieSampleCell = self.tableView.cellForRow(at: indexPath) as! LottieSampleCell
        if isDone {
            cell.animateCheckbox()
        } else {
            cell.stopAnimCheckbox()
        }
        
        self.todoList.remove(at: indexPath.row)
        self.todoList.insert(newTodo, at: indexPath.row)
    }

最後に

・今年は夏に主催された海辺でもくもく in 茅ヶ崎にお邪魔させて頂きました。
・台風を誘き寄せない愛好会パワー、もくもく会の合間に作って頂いた料理の美味さ、カレーで乾杯は可能であることを知ることができました。
・また来年も愛好会イベントに参加することが出来るようPMを騙くらかしいつでも動ける準備をしたいと思います。

・メリークリスマス🎄🎅&良いお年を🌄🎍