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
Animationをアプリに導入してみる
Search
Shuichi Nagao
September 22, 2017
Programming
0
650
Animationをアプリに導入してみる
最近のイケてるアプリにはアニメーションがいい感じに入っている。どういう実装が良いのか調べてみた。Airbnbのライブラリを紹介する。
Shuichi Nagao
September 22, 2017
Tweet
Share
More Decks by Shuichi Nagao
See All by Shuichi Nagao
UX for Key Management
ngo275
0
91
深センではテクノロジーを使う人がイノベーションを起こしている
ngo275
0
520
スマートコントラクトのデプロイって何だろう
ngo275
0
750
プロトタイピングするならFirebaseを使ってみよう
ngo275
0
1.7k
Ethereumで開発を始めるなら知っておきたいこと
ngo275
10
4.9k
スマートコントラクトをHTTPで実行する
ngo275
0
110
EOSでスマートコントラクトを実行してみる
ngo275
0
1.1k
iOSアプリエンジニアがReact Nativeを使ってみて
ngo275
0
270
中東のシリコンバレーことイスラエルに行ってきた
ngo275
0
120
Other Decks in Programming
See All in Programming
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
Honoとフロントエンドの 型安全性について
yodaka
4
250
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
SwiftUI Viewの責務分離
elmetal
PRO
0
140
Featured
See All Featured
Site-Speed That Sticks
csswizardry
3
370
Visualization
eitanlees
146
15k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Agile that works and the tools we love
rasmusluckow
328
21k
Why Our Code Smells
bkeepers
PRO
335
57k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How STYLIGHT went responsive
nonsquared
98
5.3k
How to Ace a Technical Interview
jacobian
276
23k
Thoughts on Productivity
jonyablonski
69
4.5k
Building Adaptive Systems
keathley
40
2.4k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Transcript
AnimationΛ ΞϓϦʹಋೖͯ͠ΈΔ ngo275 2017/09/22
ࡢࠓʹͳͬͨΞϓϦ
paymoͷϩΰΞχϝʔγϣϯ • UIImageViewͷΞχ ϝʔγϣϯΛར༻ • 86ຕͷpngΛ࠶ੜ
gifͰΞχϝʔγϣϯΛ࠶ੜ͢Δ • FLAnimatedImagegif͕ਓؾʢstar: 6k~ʣ • Flipboard͕։ൃ͍ͯ͠Δ • MediumɺFacebookɺPinterestͱ͔͕ར༻ • WebViewΛ͏
• ϥΠϒϥϦΛՃ͢Δඞཁͳ͠ • ϩʔυ͢Δ࣌ʹͪΒͭ͘
AirbnbͷΞχϝʔγϣϯ
AirbnbͷΞχϝʔγϣϯ
Airbnb͕ϥΠϒϥϦΛग़͍ͯͨ͠
lottieͱ • Airbnb͕ग़͍ͯ͠ΔΞχϝʔγϣϯΛ؆୯ʹඳը͢ΔϥΠ ϒϥϦ • AdobeAfterEffectsΛͬͯjsonͰExportͨ͠ϑΝΠϧΛར ༻͢Δ • σβΠφʔ͕ΞχϝʔγϣϯΛ࡞ͬͯΤϯδχΞ͕ΞϓϦ ʹ؆୯ʹΈࠐΊΔ
• iOSɺAndroindɺReact NativeʹରԠ ࢀߟ http://airbnb.io/lottie/
AfterEffectsΛ͏ • AdobeAfterEffectsΛΠϯετʔϧʢମݧ൛Ұिؒແྉʣ • ϓϥάΠϯBodymovinΛΠϯετʔϧ url: https://exchange.adobe.com/addons/products/12557#.WcR4stMjHXG • Preferences >
General > Allow Script to Write Files and Access Network Λtrueʹ͢Δ • mp4ϑΝΠϧΛυϥοάɾΞϯυɾυϩοϓͯ͠ฤू • compositionΛjsonʹॻ͖ग़͢
αϯϓϧॆ࣮͍ͯ͠Δ • https://www.lottiefiles.com/
iOSʹΈࠐΜͰΈΔ ΞχϝʔγϣϯΛͱΓ͋͑ͣྲྀ͢
iOSʹΈࠐΜͰΈΔ Ұճ࠶ੜ͠ऴΘͬͨΒΞχϝʔγϣϯΛফ͢
iOSʹΈࠐΜͰΈΔ ҙͷλΠϛϯάͰΞχϝʔγϣϯΛग़ͨ͠Γফͨ͠Γ͢Δ
·ͱΊ • Ξχϝʔγϣϯॏཁ • UIImageViewɾgifͷ࠶ੜɾjson(Airbnbྲྀ)ͰΈࠐΉʑ • UIImageView: ֦ுͷඞཁͳ͕ͩ͠ɺͨ͘͞ΜΈࠐΉʹେม • gifͰ࠶ੜ:
FLAnimatedImagegif͕Ԧಓײ͋Δ • Airbnbྲྀ: ৽ͯ͘͠։ൃ͕Μ • https://qiita.com/ngo275/items/c9e94bad7a7afc85e4f4