エンジニアが見つめるLottieアニメーション

エンジニアが⾒つめる Lottieアニメーション Jinny You, LottieFiles [email protected]

Agenda 1. 自己紹介 2. エンジニアにとってLottieとは？ 3. Lottieで簡単なLandingページ 4. Studio X
LottieFiles デモ 5. Dev PortalとLottieFiles 6. まとめ

自己紹介 Jinny You （ジニユウ） Software Engineer, LottieFiles - Graphics
Engineの開発 - 次世代のLottieプレーヤーの開発

エンジニアにとって Lottieとは？

Lottieについてアニメーションが必要な時

Lottieについて CSSやJSから⼀つずつコーディング

Lottieについてキーワードから探して

Lottieについて少ないコードでもできる！

Lottieについてデザイナーから “こんなアニメーションください”と聞かれた時も

Lottieについて “こんなアニメーション”だって、、、何！？？？？ “Lottieでしましょう！”

Lottieについて Motion Graphicsはもう誰にとっても容易になっています

それで、Lottieがどれだけ簡単だというの？

これから、簡単なコードで Lottieを使いましょう

Lottieで作る簡単なLandingページ

質問があります

皆さんの中で HTMLやJSができる⽅がいらっしゃいますか？

最近はコーディングができる⽅が増えてると感じます

Lottieがあればいいかな？

お好きなアニメーションを選び！ https://lottiefiles.com/featured

１。２。３。

数⾏のコードでアニメーションを実装しました

アニメーションと⼀緒にきれいなページ

あまり、難しくなかったですね

複雑なアニメーションは Lottieで協業すればどうでしょうか

LottieではWebサイトやアプリにアニメーションを効果的に作れます。

Studio X LottieFiles デモ

Dev PortalとLottieFiles

LottieFilesは皆さんの便利なLottie適⽤のために、 Dev PortalとSupportグループを提供しています https://developers.lottiefiles.com

どこでも使える便利なLibrary - Android - iOS - React Native -
Flutter - Windows - React

全プラットフォームをサポートする効果的なRuntime ⚡

Lottieについて質問があればいつでもご利⽤ください (FAQ, Library, Integration, Support…) https://developers.lottiefiles.com

まとめ

まとめ複雑なアニメーションは ✔ Lottieで開発者とラボレーション Lottieを実装するのは ✔ Dev
Portalから情報を貰う 👈 🎨 デザイナー開発者 󰠁 👉

Tech質問やIssueについては、お気軽に連絡してください。 Jinny You （ジニユウ） Software Engineer, LottieFiles -
linkedin.com/in/jinui - x.com/jinuiyou - speakerdeck.com/tinyjin

More Decks by Jinny You