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
370
Animated APIを使ってスクロールで隠れる“あのバー”を作る
Keigo Ebihara
January 17, 2019
Tweet
Share
More Decks by Keigo Ebihara
See All by Keigo Ebihara
tRPCを実務に導入して分かった旨味と苦味
misoton665
5
2.1k
バリデーションライブラリをフォームバリデーション以外で活用する
misoton665
0
870
しんどくならないモジュール分割
misoton665
1
1.7k
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Site-Speed That Sticks
csswizardry
4
410
Documentation Writing (for coders)
carmenintech
68
4.6k
Gamification - CAS2011
davidbonilla
80
5.2k
Embracing the Ebb and Flow
colly
84
4.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Raft: Consensus for Rubyists
vanstee
137
6.8k
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ͷਖ਼໊ࣜশΛ͍ͬͯΔํڭ͍͑ͯͩ͘͞ʜ