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

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

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
書籍『生成AIの安全性入門』の入門
Avatar for Koki Wataoka wataoka
0
210
多摩川(.dev)ランニング入門 / Tamagawa.dev#3
Avatar for FUJIWARA Shunichiro fujiwara3
3
350
Webとヘルスデータ
Avatar for Yuku Kotani yukukotani
0
170
PfEingのアプローチで働こう
Avatar for rin（林晃 / Akira Hayashi） rindrics
0
170
動画配信アプリでの Engage SDK 導入 — TVer Android が Play ストアにコンテンツを届けるまで
Avatar for TVer Inc. techtver
PRO
0
110
AI 駆動 Terraform 開発/SRE_BizReach_MIXI_2
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
320
生成AI時代の クレデンシャルとパーミッション設計
Avatar for NRI Netcom nrinetcom
PRO
3
1.5k
AIとペアプロを始める。人とのペアプロをやめる。ペアプロの良さを改めて知る。もっと好きになった。 / Rediscovering Pair Programming
Avatar for yuki honyanya
1
230
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
Avatar for LayerX layerx
PRO
2
1.2k
こんなアーキテクチャ図は嫌だ BEYOND THE TIME: 半年後の自分へ贈る15のメッセージ / 15 of Anti-pattern in AWS Architecture Diagrams
Avatar for Naomi Yamasaki naospon
3
230
AI時代に、プロダクトの数だけ積み上がる所有コストをどうエンジニアリングするか / Engineering the Cost of Ownership
Avatar for Kazuki Maeda kzkmaeda
0
1k
【視聴者参加型！】AWSセキュリティアンチパターンクイズ
Avatar for Shun Yoshie syoshie
0
400

Featured

See All Featured
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
190
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
770
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
260
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
410
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
9.8k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
230

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