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
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Rails アプリ地図考 Flush Cut
makicamel
1
110
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
Immutable ActiveRecord
megane42
0
130
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
What's in a price? How to price your products and services
michaelherold
244
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Rails Girls Zürich Keynote
gr2m
94
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
A designer walks into a library…
pauljervisheath
205
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Optimizing for Happiness
mojombo
376
70k
Side Projects
sachag
452
42k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
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