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
360
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
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Adopting Sorbet at Scale
ufuk
74
9.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Building an army of robots
kneath
303
45k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.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ͷਖ਼໊ࣜশΛ͍ͬͯΔํڭ͍͑ͯͩ͘͞ʜ