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
81
エンジニアが見つめる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
300
모던 웹 기술로 C++ 렌더링 엔진 테스트 자동화하기
tinyjin
0
19
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지
tinyjin
0
220
韩国的打卡地:你喜欢海边吗?
tinyjin
0
25
LottieFiles로 시작하는 빠르고 효율적인 애니메이션 핸드오프
tinyjin
0
58
ThorVG's Lottie Model in Action
tinyjin
0
170
국민대학교 사제동행 세미나
tinyjin
0
290
Cumulus - Application Weakness Monitoring Software
tinyjin
0
41
개인정보와 개인정보 비식별화
tinyjin
0
58
Other Decks in Design
See All in Design
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.3k
How to go from research data to insights?
mastervicedesign
0
220
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
810
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
Dive Deep into Communication
yomtsu
0
210
最速[要出典]アクセシビリティチェック
magi1125
2
200
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
190
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
140
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.4k
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.4k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
240
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Become a Pro
speakerdeck
PRO
26
5.1k
Producing Creativity
orderedlist
PRO
343
39k
Automating Front-end Workflow
addyosmani
1367
200k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
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