SNSアプリでいいね押した時などにふわ！キラーン！ってなるやつ。
作りたいですよね。
LottieはiOSエンジニアにとって組み込みがとても楽なのですが、聞くところによるとデザインデータも作るのはそれほど難しくないとのことなので※1実際に作って取り込んでみました。
※1: アニメーションによる

参考ページ:

環境:

  • Adobe Illustrator v25.0.1
  • Adobe After Effects v16.1.3
  • Xcode v12.2 (Swift 5)

成果物

難しかった点

After Effectsの使い方がわかりませんでした。(知ってた)
もちろん、ちゃんとしたデザインを考える場合そっち側のスキルやIllstratorのの知見も必要なのですが、Lottieを使う上ではなんといっても「動かないと始まらない」ので…。
その点では参考ページにて、After Effectsアニメーションをつけるお膳立てまで記載して下さっていて、とても助かりました?‍♀️圧倒的感謝!

やったこと

ほぼほぼ参考ページ先の情報で全て完結するのですが、それでもあえて備忘録的にメモします。

  1. Illustrator でイラストを作成する
    • 実際利用するサイズは小さくてもAfter Effectsで編集する時にやりにくいので、サイズは大きめにとっておく方が良い。
    • パーツは一つずつレイヤー分けすること(よく分からないけど新規レイヤー作成をちゃんとする)
    • 塗りつぶしや線の色ははAfter Effectsで変更が効くのでそこまで気にする必要はない。ただし黒は背景と被るので避けた方が吉。
    • 画像と同じでUIパーツが埋め込まれるサイズを意識して作ること
  2. Adobe After Effectsでアニメーションをつける
    • ON/OFFなどの状態を表すフレームをちゃんと作っておく
    • 他のアニメーションとのアニメーションタイミングの足並みを揃えておく必要はあるが、アニメーション速度自体は組み込み時に指定ができるのでそこはあまり気にする必要はない
    • After EffectsでできてLottieでロストする効果？があるらしい。この辺を参照
  3. Bodymovinで出力する
    • GitHub経由でソースを落として専用解凍ソフトもおとして〜という手順を踏まなくてもここから普通に拡張機能としてインストールできます
  4. Previewする
    • 何処からどこまでを何として再生させるかの確認を行う
    • シンプルな素材ならここでカラーなどの調整を行ってしまってもいいかもしれない(とりあえず作っておいて、色はここで合わせるなど)
  5. Xcodeで導入
    • 腐ってもiOSエンジニアなので、Lottieの確認用アプリは必要ありません
// 簡単アニメーション！
self?.animationView?.play(fromFrame: $0.fromFrame, toFrame: $0.toFrame, loopMode: .playOnce, completion: nil)

最後に

この素晴らしいライブラリですが、Lottieのサイトがとてもよくできておりまして…ええ。
エンジニア勢の方もぜひ触っていただきたい。(Previewページなど)