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
100
深センではテクノロジーを使う人がイノベーションを起こしている
ngo275
0
560
スマートコントラクトのデプロイって何だろう
ngo275
0
780
プロトタイピングするならFirebaseを使ってみよう
ngo275
0
1.8k
Ethereumで開発を始めるなら知っておきたいこと
ngo275
10
5k
スマートコントラクトをHTTPで実行する
ngo275
0
120
EOSでスマートコントラクトを実行してみる
ngo275
0
1.1k
iOSアプリエンジニアがReact Nativeを使ってみて
ngo275
0
280
中東のシリコンバレーことイスラエルに行ってきた
ngo275
0
130
Other Decks in Programming
See All in Programming
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
160
ニーリーにおけるプロダクトエンジニア
nealle
0
900
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.1k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
600
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
980
AIともっと楽するE2Eテスト
myohei
8
2.9k
PicoRuby on Rails
makicamel
2
140
Hack Claude Code with Claude Code
choplin
6
2.4k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
200
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.8k
What's new in AppKit on macOS 26
1024jp
0
140
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
700
GitHub's CSS Performance
jonrohan
1031
460k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Bash Introduction
62gerente
613
210k
Gamification - CAS2011
davidbonilla
81
5.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Thoughts on Productivity
jonyablonski
69
4.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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