Lottie
https://gyazo.com/730e3700a16a2a35ea187b644756604e
リンク集
公式
GitHub airbnb
LottieFiles
サンプル
Android用のアプリあり
他の方法との違い
アニメーションを最初から設計する
複雑なタイプのアニメーションの場合
制作に時間がかかる可能性(CSSとかで)
GIFアニメーションを使用
表示できるアニメーションの種類に制限がない
Bodymovinが生成するJSONファイルの2倍サイズ
一緒に使う道具
Adobe AfterEfect
Bodymovin
BodymovinはAfter Effectsのスクリプト
作成した動画をJSON形式で保存することができる。
プラットフォームによる違い
Web
Airbnb Engineering & Data Science
airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
ライブラリ
lottie-player
LottieFiles/lottie-player: Lottie viewer/player as an easy to use web component! https://lottiefiles.com/web-player
Web Componentsのラッパー
vue-lottie
vueラッパー
GitHub.iconvue-lottie
lottie-react
Reactラッパー
LottieFiles/lottie-react: lottie web player as a react component
? わざわざラップする意味は？
chenqingspring/react-lottie: Render After Effects animations on React based on lottie-web
? こっちとの違い
puppeteer-lottie
transitive-bullshit/puppeteer-lottie: Renders Lottie animations via Puppeteer to image, GIF, or MP4.
? Puppeteerで動かすと何が嬉しいの？
react-lottie-hook
developertown/react-lottie-hook: React hook for Lottie Animations
? わざわざライブラリとして扱う必要があるのか？スクラッチではダメなの？
Functional Component
Lottie+React NativeでFunctional Componentを使いたいんだけど？ - Qiita
Performance パフォーマンス
npmではなくSkypackを使用すると、さらに別の依存関係によるパフォーマンスの遅延が回避されます。
Animating with Lottie | CSS-Tricksのコメント欄
? どういうこと？
Loading Lottie’s animation from local storage | Dev today
localStorageのキャッシュ使う案(for Android)
? WebやPWAもあるのでは？
フリー素材
Design Tools: Get 200 Free Animated Icons to Delight Your Users
参考チュートリアル
LottieとNuxtでWebページをリッチにする
Lottieでアプリにアニメーションを組み込む話（デザイナー編）
Vue.js + Elelment UI + Lottieでお手軽にいい感じなUI/UXを作ってみる
GitHub.iconKiichiSugihara/lottie-vue-smartcamp
参考読み物
Happy Anniversary from the Lottie Team - Brandon Withrow - Medium
デザイナーとエンジニアの距離をより近づけるLottie利用術 - Speaker Deck
中の仕組み分かって良い
How to use Lottie animations effectively | by Meylin Bayryamali | Medium
実際の利用感が詳細で良かった