JSON ベースでアニメーションをあらゆるプラットフォームに配信することができるOSS！「Lottie」
概要
今回は、JSON ベースでアニメーションをあらゆるプラットフォームに配信することができる OSS「Lottie」についてご紹介いたします。
「Lottie」は Android、iOS、Web、Windows 用のライブラリであり、Airbnb が開発をしています。
美しいアニメーションを簡単に作れ、またファイルサイズも非常に軽く、SVG ファイルを使用しているため拡大縮小した際の画像の劣化などもないという、非常にすばらしいライブラリです。
「Lottie」を使用することで静止画をプラットフォームに配信するのと同じくらい簡単に、アニメーションをを配信することができるということです。
それでは早速詳細についてみていきましょう！
目次
特徴
「Lottie」の特徴として、以下の点が挙げられていました。
小さいファイルサイズ
「Lottie」アニメーションなら、GIFやMP4のようなほかの形式と比べて、同じ品質を保ちながらファイルサイズをはるかに小さくすることが可能。
無限に拡大縮小可能
「Lottie」アニメーションはベクターベースです。そのため、解像度を気にすることなく拡大縮小することが可能。
マルチプラットフォームのサポートとライブラリ
「Lottie」アニメーションは、修正することなくiOS、Android、Web、React Nativeで使用可能。
インタラクティブ
「Lottie」アニメーションは、アニメーションの各要素にアクセスして操作が可能。
スクロール、クリック、ホバーといったインタラクションに反応するインタラクティブなアニメーションを作成することも可能。
詳しくは「インタラクティビティガイド」を参照。
利用手順
「Lottie」の利用手順ですが、どのプラットフォームで使用するかによってライブラリのインストール方法が異なります。
Android
build.gradle ファイルに以下を追加することで利用することが可能です。
dependencies {
...
implementation "com.airbnb.android:lottie:$lottieVersion"
...
}
なお、詳細は以下に記載がありますので、参照ください。
iOS
Swift Package Manager を使用して Lottie をインストールするには、現在のバージョンの Lottie リポジトリの URL を使用して インストールすることが可能です。
- XCode において、「File」→「Add Packages...」を選択
- https://github.com/airbnb/lottie-spm.git を入力
もしくは、Package.swift に以下を追記します。
.package(url: "https://github.com/airbnb/lottie-spm.git", from: "4.3.3")
なお、詳細は以下に記載がありますので、参照ください。
React Native
iOS・Android アプリ向けとしては以下をインストールします。
yarn add lottie-react-native
その後、ios フォルダに移り、以下を実行します。
pod install
Web アプリ向けとしては以下をインストールします。
yarn add lottie-react-native
その後、web players の依存関係ライブラリをインストールします。
yarn add @dotlottie/react-player @lottiefiles/react-lottie-player
なお、詳細は以下に記載がありますので、参照ください。
Web
以下を記載します。
<script src="js/bodymovin.js" type="text/javascript"></script> <!-- OR --> <script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>
ちなみに、Bodymovin は以下のように使用します。
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'), // Required
path: 'data.json', // Required
renderer: 'svg/canvas/html', // Required
loop: true, // Optional
autoplay: true, // Optional
name: "Hello World", // Name for future reference. Optional.
})
なお、詳細は以下に記載がありますので、参照ください。
Windows
Windows の場合はチュートリアルが紹介されていましたので、以下のサイトを参考にインストールします。
使用感
「Lottie」の使用感についてまとめてみました。
確かにいろんなプラットフォームで軽快できれいなアニメーションが利用可能で、とても楽しく感じますね。
まとめ
今回は、JSON ベースでアニメーションをあらゆるプラットフォームに配信することができる OSS「Lottie」についてご紹介いたしました。
私自身もアニメーションを勉強中なので、このようなきれいでポップなアニメーションを作れるように、「Lottie」を早速使ってみたいと思いました！
アニメーションを作りたいけど何をすればいいかわからない、簡単にきれいなアニメーションを作ってみたい、という方にとってはとてもお勧めできる OSS かと思います。
気になった方はぜひ一度こちらの「Lottie」を利用してみてはいかがでしょうか。
