話題のアニメーションライブラリLottieの導入法をイチから解説。
これであなたのアプリもめっちゃモダンでかわいくなります。
ボタン類も豊富に用意されています。
導入方法
( SwiftPackageManagerバージョンです。手順通りにやれば大丈夫です）
Lottieを導入したいXcodeプロジェクトをひらきます。
Build Settings の Linking から Dead Code Stripping を No にします。
File > Swift Packages > Add Package Dependencyを選択します。
RepositoryにLottieのGitHub URL： https://github.com/airbnb/lottie-ios をコピペします。
そしてNext。
ブランチなどもそのままでNext。
Finish で Lottie フレームワーク がプロジェクトに入ります。
使用方法
Lottie アニメーションのJsonファイルを取得
LottieのHPからLottie JSON をダウンロード。
プロジェクトにドラッグ＆ドロップ。
（ファイル名は好きな名前.jsonに変えて大丈夫）
Animation View を追加
Lottie をインポートします。
import Lottie
Lottieアニメーションビューを初期化します。
UIViewと同じようにあつかえます。
var animationView = AnimationView()
animationView.frame = view.frame
animationView.contentMode = .scaleAspectFit
view.addSubview(animationView)
Animationを初期化して再生
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()
背景透過で再生されました。
オプション
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:) ：アニメーションの範囲を指定（０〜１）
自前のアニメーションを作る
デザイナー向けチュートリアルで After Effect というソフトを使ってLottieアニメーションを作る方法を学べるそうです。
また、一から作るところまでは行かなくても、既存のLottieアニメーションをLottieエディタにドロップして編集できます。
公式サイトでは、無料・有料アニメーションはじめ、Webに埋め込む方法などたくさん情報があります。
🐣
お仕事のご相談こちらまで
rockyshikoku@gmail.com
Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。