Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エンジニアが見つめるLottieアニメーション
Search
Jinny You
June 19, 2024
Design
0
72
エンジニアが見つめるLottieアニメーション
"Animate & Create: Dive Into Motion Design with LottieFiles 〜Figma→Lottieを学ぼう〜"
Jinny You
June 19, 2024
Tweet
Share
More Decks by Jinny You
See All by Jinny You
인디 앱 개발자와 Flutter
tinyjin
0
270
모던 웹 기술로 C++ 렌더링 엔진 테스트 자동화하기
tinyjin
0
18
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지
tinyjin
0
200
韩国的打卡地:你喜欢海边吗?
tinyjin
0
21
LottieFiles로 시작하는 빠르고 효율적인 애니메이션 핸드오프
tinyjin
0
53
ThorVG's Lottie Model in Action
tinyjin
0
160
국민대학교 사제동행 세미나
tinyjin
0
270
Cumulus - Application Weakness Monitoring Software
tinyjin
0
37
개인정보와 개인정보 비식별화
tinyjin
0
56
Other Decks in Design
See All in Design
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
310
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
670
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
470
Haruki_Konaka_Portforio.pdf
haruki556
0
880
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
300
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
240
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.3k
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
4
290
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
320
Yahoo Newsletter Clicker Template
xuechunwu
0
300
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
7.8k
発表資料テンプレート / My slide template
thatblue
0
160
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Scaling GitHub
holman
459
140k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
GraphQLとの向き合い方2022年版
quramy
44
13k
Being A Developer After 40
akosma
89
590k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Language of Interfaces
destraynor
155
24k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Music & Morning Musume
bryan
46
6.3k
Done Done
chrislema
182
16k
Transcript
エンジニアが ⾒つめる 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
1。 2。 3。
None
数⾏のコードでアニ メーションを実装し ました
アニメーションと⼀緒に きれいなページ
あまり、難しく なかったですね
複雑なアニメーションは 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