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
830
しんどくならないモジュール分割
misoton665
1
1.7k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Visualization
eitanlees
145
15k
Facilitating Awesome Meetings
lara
50
6.1k
Agile that works and the tools we love
rasmusluckow
327
21k
Making Projects Easy
brettharned
115
5.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
How to Ace a Technical Interview
jacobian
276
23k
Practical Orchestrator
shlominoach
186
10k
Scaling GitHub
holman
458
140k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Gamification - CAS2011
davidbonilla
80
5k
Adopting Sorbet at Scale
ufuk
73
9.1k
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ͷਖ਼໊ࣜশΛ͍ͬͯΔํڭ͍͑ͯͩ͘͞ʜ