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
bodymovin × Lottie - マルチデバイスに対応した SVG アニメーション・エ...
Search
wakamsha
May 27, 2017
Technology
2
970
bodymovin × Lottie - マルチデバイスに対応した SVG アニメーション・エコシステム
2017年5月27日 『初夏の JavaScript 祭 in mixi』にて発表した資料です。
wakamsha
May 27, 2017
Tweet
Share
More Decks by wakamsha
See All by wakamsha
Storybook 勉強会
wakamsha
0
190
フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記
wakamsha
5
5.8k
Vite を使ってアプリケーションに環境変数を参照させる方法を考える
wakamsha
0
1.3k
小さくはじめる車輪の再発明のすゝめ
wakamsha
0
330
JavaScript ( 時々 TypeScript ) で ゆるやかにはじめる関数型プログラミング
wakamsha
6
3.1k
【codegen は難しくない】Swagger から JavaScript ( TypeScript ) コードを自動生成してコーディングを効率化しよう
wakamsha
4
3.5k
My name is WAKAMSHA - I’m a programmer / web frontend engineer.
wakamsha
1
2.1k
それ、もっとスマートに書けるよ - JavaScript コードをもっと短く、もっとシンプルに書く Tips 4選
wakamsha
9
14k
LP 制作フローを抜本的に改善した話
wakamsha
1
470
Other Decks in Technology
See All in Technology
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
940
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
450
TypeScript入門
recruitengineers
PRO
35
11k
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.2k
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
120
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
15
7.4k
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
180
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
260
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
2.7k
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
5
1.4k
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
6
1.8k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
150
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Six Lessons from altMBA
skipperchong
28
4k
We Have a Design System, Now What?
morganepeng
53
7.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Transcript
CPEZNPWJO º -PUUJF ϚϧνσόΠεʹରԠͨ͠47(ΞχϝʔγϣϯɾΤίγεςϜ - SVG animation ecosystem supporting multiple
devices - /BPLJ:"."%" !XBLBNTIB ॳՆͷ+BWB4DSJQUࡇJONJYJ
- What’s bodymovin ? - - bodymovin ͬͯԿʁ -
- What’s bodymovin ? - "EPCF"GUFS&⒎FDUTͰ੍࡞ͨ͠ΞχϝʔγϣϯσʔλΛ +40/ܗࣜͰॻ͖ग़͢"GUFS&⒎FDUTϓϥάΠϯ
- What’s bodymovin ? - ॻ͖ग़͞Εͨ+40/Λ47(Ξχϝʔγϣϯͱͯ͠࠶ੜͰ͖Δ +BWB4DSJQUϥΠϒϥϦ
- Basic Example - - ಈ͔ͯ͠ΈΑ͏ -
- Basic Example -
- Basic Example -
CPEZNPWJO w "&ͷ֤छϒϨϯυϞʔυʹରԠ w ςΩετσʔλͷϨϯμϦϯάʹରԠ w 47(ϕΫλʔσʔλͳͷͰղ૾ʹґଘ͠ͳ͍ w "GUFS&⒎FDUTͷߴ͍දݱྗΛͦͷ··XFCϒϥβ্Ͱ දݱͰ͖Δ
0OFNPSFUIJOHʜ ͔͜͜Β͕ຊ൪ ͔Βͷʜ
- What’s Lottie ? - - Lottie ͱҰମʁ -
-PUUJF w CPEZNPWJOͰॻ͖ग़͞Εͨ+40/ΛωΠςΟϒΞϓϦέʔ γϣϯͰಈ࡞ͤ͞ΔϓϥάΠϯ w J04"OESPJE3FBDU/BUJWFʹରԠࡁΈ w "JSCOCʹΑΔΦʔϓϯιʔε
None
- Basic Examples - - ಈ͔ͯ͠ΈΑ͏ -
- Basic Examples -
"TBQPJOUPGOPUF w ϏοτϚοϓσʔλؚ͕·Ε͍ͯΔͱਖ਼ৗʹಈ࡞͠ͳ͍ w ίϯϙδγϣϯ͕ωετ͍ͯ͠ΔͱΞχϝʔγϣϯ͕ਖ਼ৗʹ ಈ࡞͠ͳ͍ ˞-PUUJFʹͯ w ϓϦϩʔμʔΞΠίϯͱ͍ͬͨখنͳΞχϝʔγϣϯ͕
༻్ͱͯ͠ద
*OUSPEVDFNZTFMG Զͷ໊લΛݴͬͯΈΖ ࣗݾհ
גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ XFCϑϩϯτΤϯυΤϯδχΞ ࢁా थ /BPLJ:"."%" *OUSPEVDFNZTFMG !XBLBNTIB
https://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG
None
https://tech.recruit-mp.co.jp 3.1 ϒϩά
5IBOLZPV