Upgrade to Pro — share decks privately, control downloads, hide ads and more …

bodymovin × Lottie - マルチデバイスに対応した SVG アニメーション・エ...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for wakamsha wakamsha
May 27, 2017
Technology
1k
2

bodymovin × Lottie - マルチデバイスに対応した SVG アニメーション・エコシステム

2017年5月27日 『初夏の JavaScript 祭 in mixi』にて発表した資料です。

Avatar for wakamsha

wakamsha

May 27, 2017

More Decks by wakamsha

See All by wakamsha
Storybook 勉強会
Avatar for wakamsha wakamsha
0
260
フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記
Avatar for wakamsha wakamsha
5
6.2k
Vite を使ってアプリケーションに環境変数を参照させる方法を考える
Avatar for wakamsha wakamsha
0
1.4k
小さくはじめる車輪の再発明のすゝめ
Avatar for wakamsha wakamsha
0
360
JavaScript ( 時々 TypeScript ) で ゆるやかにはじめる関数型プログラミング
Avatar for wakamsha wakamsha
6
3.2k
【codegen は難しくない】Swagger から JavaScript ( TypeScript ) コードを自動生成してコーディングを効率化しよう
Avatar for wakamsha wakamsha
4
3.6k
My name is WAKAMSHA - I’m a programmer / web frontend engineer.
Avatar for wakamsha wakamsha
1
2.3k
それ、もっとスマートに書けるよ - JavaScript コードをもっと短く、もっとシンプルに書く Tips 4選
Avatar for wakamsha wakamsha
9
14k
LP 制作フローを抜本的に改善した話
Avatar for wakamsha wakamsha
1
510

Other Decks in Technology

See All in Technology
Bet AI Day 2026丨AIによって本質に戻るシステムリスク管理
Avatar for LayerX layerx
PRO
0
370
みてねにおけるAI-DLC導入活動とAIドリブン開発の現在地/JAWS-UG AI-DLC #2
Avatar for Isao Shimizu isaoshimizu
2
320
LLMアプリ、 雰囲気で運用してませんか？ 〜LLMOpsの現在地〜
Avatar for Takaaki Yayoi taka_aki
1
640
IHV like なユースケースへのOpenID Connect 関連仕様の適用事例
Avatar for OPTiM optim
0
440
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
7
20k
サーバー常駐型の 簡易障害調査AI エージェントを作ってみた話
Avatar for masayoshi masayoshi
1
500
Microsoft MVP プログラムを紹介するから目指す人増えてくれ
Avatar for Yuta Matsumura tsubakimoto_s
0
160
AWSとGitHub Actionsの責任境界と 組織で安全に使用する取り組み
Avatar for Nealle nealle
1
240
Jetpack Compose で挑む新聞紙面UI ─ 複合ジェスチャー・ポリゴン記事領域・適応的ページ構成という3つの壁/droidkaigi2026
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
110
【Oracle AI Spotlight ウェビナー】AWSか、Azureか、Google Cloudか。その議論にオラクルを含める意義。
Avatar for oracle4engineer oracle4engineer
PRO
1
170
全社に広がるMCPサーバーを、 どう安全に管理するか MCPass開発の舞台裏
Avatar for k.muguruma mtpooh
3
220
顧客の要望は2次情報である 〜アンテナを張るFDEの構造論〜
Avatar for Noriaki Oji noriakioji
5
1.1k

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
220
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
490
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
480
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
320
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
400
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
680
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.7k

Transcript

  1. CPEZNPWJO º -PUUJF ϚϧνσόΠεʹରԠͨ͠47(ΞχϝʔγϣϯɾΤίγεςϜ - SVG animation ecosystem supporting multiple

    devices -  /BPLJ:"."%" !XBLBNTIB ॳՆͷ+BWB4DSJQUࡇJONJYJ

  2. - What’s bodymovin ? - - bodymovin ͬͯԿʁ -

  3. - What’s bodymovin ? - "EPCF"GUFS&⒎FDUTͰ੍࡞ͨ͠ΞχϝʔγϣϯσʔλΛ +40/ܗࣜͰॻ͖ग़͢"GUFS&⒎FDUTϓϥάΠϯ

  4. - What’s bodymovin ? - ॻ͖ग़͞Εͨ+40/Λ47(Ξχϝʔγϣϯͱͯ͠࠶ੜͰ͖Δ +BWB4DSJQUϥΠϒϥϦ

  5. - Basic Example - - ಈ͔ͯ͠ΈΑ͏ -

  6. - Basic Example -

  7. - Basic Example -

  8. CPEZNPWJO w "&ͷ֤छϒϨϯυϞʔυʹରԠ w ςΩετσʔλͷϨϯμϦϯάʹ΋ରԠ w 47(͸ϕΫλʔσʔλͳͷͰղ૾౓ʹґଘ͠ͳ͍ w "GUFS&⒎FDUTͷߴ͍දݱྗΛͦͷ··XFCϒϥ΢β্Ͱ දݱͰ͖Δ

  9. 0OFNPSFUIJOHʜ ͔͜͜Β͕ຊ൪ ͔Βͷʜ

  10. - What’s Lottie ? - - Lottie ͱ͸Ұମʁ -

  11. -PUUJF w CPEZNPWJOͰॻ͖ग़͞Εͨ+40/ΛωΠςΟϒΞϓϦέʔ γϣϯͰಈ࡞ͤ͞ΔϓϥάΠϯ w J04"OESPJE3FBDU/BUJWFʹରԠࡁΈ w "JSCOCʹΑΔΦʔϓϯιʔε

  12. None

  13. - Basic Examples - - ಈ͔ͯ͠ΈΑ͏ -

  14. - Basic Examples -

  15. "TBQPJOUPGOPUF w ϏοτϚοϓσʔλؚ͕·Ε͍ͯΔͱਖ਼ৗʹಈ࡞͠ͳ͍ w ίϯϙδγϣϯ͕ωετ͍ͯ͠ΔͱΞχϝʔγϣϯ͕ਖ਼ৗʹ ಈ࡞͠ͳ͍ ˞-PUUJFʹͯ  w ϓϦϩʔμʔ΍ΞΠίϯͱ͍ͬͨখن໛ͳΞχϝʔγϣϯ͕

    ༻్ͱͯ͠ద੾

  16. *OUSPEVDFNZTFMG Զͷ໊લΛݴͬͯΈΖ ࣗݾ঺հ

  17. גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ XFCϑϩϯτΤϯυΤϯδχΞ ࢁా ௚थ /BPLJ:"."%" *OUSPEVDFNZTFMG !XBLBNTIB

  18. https://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG

  19. None

  20. https://tech.recruit-mp.co.jp 3.1 ϒϩά

  21. 5IBOLZPV