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
Animated APIを使ってスクロールで隠れる“あのバー”を作る
Search
Keigo Ebihara
January 17, 2019
0
350
Animated APIを使ってスクロールで隠れる“あのバー”を作る
Keigo Ebihara
January 17, 2019
Tweet
Share
More Decks by Keigo Ebihara
See All by Keigo Ebihara
tRPCを実務に導入して分かった旨味と苦味
misoton665
5
1.9k
バリデーションライブラリをフォームバリデーション以外で活用する
misoton665
0
820
しんどくならないモジュール分割
misoton665
1
1.7k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Adopting Sorbet at Scale
ufuk
73
9k
GitHub's CSS Performance
jonrohan
1030
460k
Music & Morning Musume
bryan
46
6.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Testing 201, or: Great Expectations
jmmastey
38
7k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Automating Front-end Workflow
addyosmani
1365
200k
Transcript
"OJNBUFE"1*Λͬͯ εΫϩʔϧͰӅΕΔ l͋ͷόʔzΛ࡞Δ
ࣗݾհ w NJTPUPOւݪܓޗ w 'SJOHFϑϩϯτΤϯυΤϯδχΞ w 4DBMBɾ&MNɾ5ZQF4DSJQU w 6OJQPTͱ͍͏ϓϩμΫτͰ3FBDU/BUJWFΛ͍ͬͯ·͢ɻ
"OJNBUFE"1* ΞχϝʔγϣϯΛѻ͏ͨΊͷ3FBDU/BUJWFඪ४ͷ"1* "OJNBUFE"1* "OJNBUFE7BMVF Ϗϡʔ ૢ࡞ ࢀর ʮTͰ͔Βʹ૿Ճ͠ͳ͍͞ʯ TͰͷҐஔ͔ΒͷҐஔʹҠಈ
ϦετͷεΫϩʔϧͱ࿈ಈ্ͯ͠ԼʹҠಈ͢Δ ेԼʹεΫϩʔϧͨ͠ޙͰग़ݱ͢Δ 5XJUUFS 'BDFCPPL -*/&Ͱ࠾༻͞Ε͍ͯΔ6* l͋ͷόʔzͱ 5XJUUFSը໘ͷ(*'
w ωΠςΟϒίʔυΛͰ͖Δ͚ͩॻ͔ͳ͍ɻωΠςΟϒͷ"1* ΛࣗͰୟ͔ͳ͍ͱ͍͏։ൃํɻ w ωΠςΟϒίʔυ͕૿͑Δͱ3FBDU/BUJWFͷϝϦοτ͕ ബ͘ͳΔɻ w ୯७ͳͷͳΒࣗͰॻ͍ͯཧ͢Δํ͕҆શɻ w ֎෦ϥΠϒϥϦ͍ͭϝϯς͞Εͳ͘ͳΔ͔Θ͔Βͳ͍ɻ
w ໌֬ͳϝϦοτ͕͋Δ߹ผɻ ωΠςΟϒͷ"1*ʹ༻ҙ͞Εͯͳ͍ͷʁ ϥΠϒϥϦΘͳ͍ͷʁ
l͋ͷόʔzΛ࣮ݱ͢ΔͨΊʹ ϦετͷεΫϩʔϧͱόʔͷಈ͖Λ࿈ಈͤ͞Δɻ ˠεΫϩʔϧΠϕϯτΛ"OJNBUFE7BMVFʹϚοϓ͢Δɻ εΫϩʔϧҐஔʹؔͳ͘ग़ݱͰ͖Δɻ ˠ"OJNBUFE7BMVFΛՃ͢Δɻ
ɹϦετͷεΫϩʔϧͱόʔͷಈ͖Λ࿈ಈͤ͞Δɻ ɹεΫϩʔϧҐஔʹؔͳ͘ग़ݱͰ͖Δɻ
nativeEvent.contentOffset.y Λ animatedValue ʹϚοϓ ݱࡏͷεΫϩʔϧҐஔ ΠϕϯτΛAnimated.ValueʹϚοϐϯά͢Δؔ Animated.event(mapping, option)
ݱࡏͷεΫϩʔϧҐஔ͚ͩ 7JFX ͋ͷόʔ ͷ:࠲ඪΛҠಈͤ͞Δ transform: [{translateY: hoge}] … hoge͚ͩY࠲ඪΛҠಈͤ͞Δ
✅ϦετͷεΫϩʔϧͱόʔͷಈ͖Λ࿈ಈͤ͞Δɻ
✅ϦετͷεΫϩʔϧͱόʔͷಈ͖Λ࿈ಈͤ͞Δɻ ɹεΫϩʔϧҐஔʹؔͳ͘ग़ݱͰ͖Δɻ
εΫϩʔϧҐஔ όʔͷ:࠲ඪ όʔͷ:࠲ඪεΫϩʔϧҐஔ εΫϩʔϧ͢Ε͢Δ΄ͲόʔԼʹ͕͍ͬͯͬͯ͞͠·͏ɻ
όʔͷ:࠲ඪεΫϩʔϧҐஔº εΫϩʔϧҐஔ όʔͷ:࠲ඪ εΫϩʔϧ͢Ε͢Δ΄Ͳόʔ্ʹ͕͍͋ͬͯ͘ɻ
ࢦఆͨؔ͠ʹैͬͯAnimated.ValueΛผͷʹม͢Δؔ animatedValue.interpolate(config) JOQVU3BOHF9࠲ඪ PVUQVU3BOHF:࠲ඪ ͜ΕͰϦετͱόʔ͕ಉ͡ํʹεΫϩʔϧ͞ΕΔΑ͏ʹ
5PPMCBS ͲͷεΫϩʔϧҐஔͰग़ݱͰ͖ΔΑ͏ʹ ͜͜·ͰͷॲཧͰɺόʔεΫϩʔϧ͢Ε ͢Δ΄Ͳ্ʹ্͕͍ͬͯ͘ɻ εΫϩʔϧ͢Δͱ্ʹ͕͋Δɻ ͜ΕΛόʔ͕ஸӅΕΔҐஔͰࢭΊ͍ͨɻ όʔͷߴ͞
Animated.ValueͷΛࢦఆൣғͰͷมԽʹ੍ݶ͢Δؔ Animated.diffClamp(animatedValue, min, max) NJO όʔͷߴ͞ ͔ΒNBY ·ͰͷมԽʹ੍ݶ ˣ
͜ΕͰόʔ͕ը໘ͷ্͙͢Ͱఀࢭ͢ΔΑ͏ʹ
✅εΫϩʔϧҐஔʹؔͳ͘ग़ݱͰ͖Δɻ
✅ϦετͷεΫϩʔϧͱόʔͷಈ͖Λ࿈ಈͤ͞Δɻ ✅εΫϩʔϧҐஔʹؔͳ͘ग़ݱͰ͖Δɻ l͋ͷόʔzʂ
͕ͩʜ w εΫϩʔϧΠϕϯτͷऔಘ͞Εํ͕J04 "OESPJEͰඍົʹ ҟͳΔɻ w εΫϩʔϧҐஔʹैͬͯϦετࣗମΛΞχϝʔγϣϯ ͤ͞ΔɺͳͲ w ্هΛճආ͠Α͏ͱ͢Δͱϓϧμϯߋ৽࣌ͷϏϡʔ͕ݟ
͑ͳ͘ͳͬͯ͠·͏ɻ w Ұํཱ͕ͭͱ͏Ұํཱ͕ͨͣɻଥڠ͢Δ͔ํ๏Λ೧ग़ ͢Δ͔͠ͳ͍ɻ
·ͱΊ w "OJNBUFE"1*ʹศརͳ͕ؔ४උ͞Ε͓ͯΓɺ୯७ͳ ΞχϝʔγϣϯͰ͋Ε͜ΕͰ؆୯ʹରԠͰ͖Δɻ w ͨͩ͠ɺҰา౿ΈࠐΜͩॲཧΛ͢Δ࣌ʹJ04 "OESPJEͷ ࠩҟ3FBDU/BUJWFͷΫηΛҙࣝͤ͟ΔΛಘͳ͍ঢ়گ͕ Γ͋ΔͷͰ͝ҙɻ w
l͋ͷόʔzͷਖ਼໊ࣜশΛ͍ͬͯΔํڭ͍͑ͯͩ͘͞ʜ