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

7129 ワード
UIKit Swift iOS animation Lottie iOS テキストリンク

話題のアニメーションライブラリ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に埋め込む方法などたくさん情報があります。

🐣

お仕事のご相談こちらまで
[email protected]

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

Twitter
Medium