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

"Animate & Create: Dive Into Motion Design with LottieFiles 〜Figma→Lottieを学ぼう〜"

Transcript

1. エンジニアが ⾒つめる Lottieアニメーション Jinny You, LottieFiles jinny@lottiefiles.com
2. Agenda 1. 自己紹介 2. エンジニアにとってLottieとは？ 3. Lottieで簡単なLandingページ 4. Studio X LottieFiles デモ 5. Dev PortalとLottieFiles 6. まとめ
3. 自己紹介 Jinny You （ジニ ユウ） Software Engineer, LottieFiles - Graphics Engineの開発 - 次世代のLottieプレーヤーの開発
4. エンジニアにとって Lottieとは？
5. Lottieについて アニメーションが 必要な時
6. Lottieについて CSSやJSから ⼀つずつコーディング
7. Lottieについて キーワードから 探して
8. Lottieについて 少ないコードでも できる！
9. Lottieについて デザイナーから “こんなアニメーションください”と 聞かれた時も
10. Lottieについて “こんなアニメーション”だって、、、 何！？？？？ “Lottieでしましょう！”
11. Lottieについて Motion Graphicsはもう誰にとっても 容易になっています
12. それで、Lottieが どれだけ簡単だというの？
13. これから、簡単なコードで Lottieを使いましょう
14. Lottieで作る 簡単なLandingページ
15. 質問があります
16. 皆さんの中で HTMLやJSができる⽅が いらっしゃいますか？
17. 最近はコーディングができる⽅が 増えてると感じます
18. Lottieがあれば いいかな？
19. お好きな アニメーションを選び！ https://lottiefiles.com/featured
20. １。 ２。 ３。
22. 数⾏のコードでアニ メーションを実装し ました
23. アニメーションと⼀緒に きれいなページ
24. あまり、難しく なかったですね
25. 複雑なアニメーションは Lottieで協業すればどうでしょうか
26. LottieではWebサイトやアプリに アニメーションを効果的に 作れます。
27. Studio X LottieFiles デモ
28. Dev PortalとLottieFiles
29. LottieFilesは皆さんの 便利なLottie適⽤のために、 Dev PortalとSupportグループを 提供しています https://developers.lottiefiles.com
30. どこでも使える 便利なLibrary - Android - iOS - React Native - Flutter - Windows - React
31. 全プラットフォームを サポートする 効果的なRuntime ⚡
32. Lottieについて 質問があれば いつでもご利⽤ください (FAQ, Library, Integration, Support…) https://developers.lottiefiles.com
33. まとめ
34. まとめ 複雑な アニメーションは ✔ Lottieで開発者と ラボレーション Lottieを 実装するのは ✔ Dev Portalから 情報を貰う 👈 🎨 デザイナー 開発者 󰠁 👉
35. Tech質問やIssueについては、 お気軽に連絡してください。 Jinny You （ジニ ユウ） Software Engineer, LottieFiles - linkedin.com/in/jinui - x.com/jinuiyou - speakerdeck.com/tinyjin