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
380
Animated APIを使ってスクロールで隠れる“あのバー”を作る
Keigo Ebihara
January 17, 2019
Tweet
Share
More Decks by Keigo Ebihara
See All by Keigo Ebihara
tRPCを実務に導入して分かった旨味と苦味
misoton665
5
2.2k
バリデーションライブラリをフォームバリデーション以外で活用する
misoton665
0
960
しんどくならないモジュール分割
misoton665
1
1.7k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building Adaptive Systems
keathley
43
2.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Facilitating Awesome Meetings
lara
55
6.5k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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ͷਖ਼໊ࣜশΛ͍ͬͯΔํڭ͍͑ͯͩ͘͞ʜ