Lottieの使い方がわかるリンク集

Lottieとは

LottieはAirbnb社が開発した、iOS/Android/React Nativeで利用できるアニメーションライブラリです。After Effectsアニメーションをリアルタイムでレンダリングし、静止画像と同じくらい簡単にアニメーションをアプリで使用することができます。

🅰️ 公式

概要の説明と各リポジトリへのリンクがあります(英語のみ)

Lottie

Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Get Started Learn more › We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns.

airbnb.design

🇯🇵 日本語の導入記事

eureka.design

導入方法から、実際のアニメーション作成まで3回に分けて解説してくれています

Lottieでつくるリッチなアニメーション（導入編） - eureka design

こんにちは。 徐々に肌寒くなりニット帽が欠かせなくなったayaです。 最近、Pairsではよりデザイン表現の幅を広げるべくLottieアニメーションを導入しました。 今回はその際の学びや知見を共有していきます✊ Airbnb社が開発したLottieは、AfterEffectsで作成したアニメーションを様々なプラットフォームで動かすことのできるようにするライブラリです。

eureka.design

Lottieでつくるリッチなアニメーション（導入編） - eureka design

こんにちは。 徐々に肌寒くなりニット帽が欠かせなくなったayaです。 最近、Pairsではよりデザイン表現の幅を広げるべくLottieアニメーションを導入しました。 今回はその際の学びや知見を共有していきます✊ Airbnb社が開発したLottieは、AfterEffectsで作成したアニメーションを様々なプラットフォームで動かすことのできるようにするライブラリです。

eureka.design

Lottieでつくるさらにリッチなアニメーション（AE実践編） - eureka design

今回はさらにリッチなアニメーションを作るため、可能な範囲でAfterEffectsでごりごりに動かすtipsをまとめてみました。 AfterEffectsをある程度触れる方向けの記事となってますので、 そもそもLottieって何？？という方は、前回の記事を読むことをお勧めします！

eureka.design

💪 より実践的な導入記事

Lottieでアプリにアニメーションを組み込む話（デザイナー編）- くらげだらけ

デザイナーの元山さんの記事。実際に制作する中でしか気づけないポイントを細かく記載してくれています。ありがたい。

Lottieでアプリにアニメーションを組み込む話（デザイナー編） - くらげだらけ

最近では Webサービスや スマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「 FacebookアプリのLoading Placeholder」や「 TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（ イチナ ...

kudakurage.hatenadiary.com

Lottieでアプリにアニメーションを組み込む話（iOSプログラマー編）- TOKOROM BLOG

上の記事を受けて書かれた、iOSエンジニア編も公開されています。一緒に開発するエンジニアにシェアしましょう

Lottieでアプリにアニメーションを組み込む話（iOSプログラマー編） * Yuta Tokoro

この記事について この記事は Lottieでアプリにアニメーションを組み込む話（デザイナー編） を受けての iOSプログラマー編 になります。 デザイナー編では実際にアニメーションを作る具体的な方法を含め解説されていますので是非ご参照ください。 Lottieとは LottieとはAdobe After ...

www.tokoro.me

How to use Lottie animations effectively

効果的な使用方法についての記事。英語ですがGoogle翻訳でも十分読めます

How to use Lottie animations effectively

A brief article on how we use Lottie to build delightful user journeys at Peak. At Peak Brain Training, we are on a mission to make neuroscience fun. We've built a large catalogue of games, all based on scientific research, to help train different cognitive skills.

medium.com

🛠 便利ツール

AEUX

Transfer visual design layers to After Effects from Figma and Sketch

aeux.io

SketchやFigmaからAfterEffectsへの書き出しができるツール。