Animated APIを使ってスクロールで隠れる“あのバー”を作る

Transcript

1. "OJNBUFE
   "1*Λ࢖ͬͯ
   εΫϩʔϧͰӅΕΔ
   l͋ͷόʔzΛ࡞Δ
2. ࣗݾ঺հ w NJTPUPO
   
   ւ࿝ݪ
   ܓޗ
   w 'SJOHF
   ϑϩϯτΤϯυΤϯδχΞ
   w 4DBMBɾ&MNɾ5ZQF4DSJQU
   w 6OJQPTͱ͍͏ϓϩμΫτͰ3FBDU/BUJWFΛ࢖͍ͬͯ·͢ɻ
3. "OJNBUFE
   "1* ΞχϝʔγϣϯΛѻ͏ͨΊͷ3FBDU/BUJWFඪ४ͷ"1* "OJNBUFE
   "1* "OJNBUFE7BMVF Ϗϡʔ ૢ࡞ ࢀর ʮTͰ͔Βʹ૿Ճ͠ͳ͍͞ʯ TͰͷҐஔ͔ΒͷҐஔʹҠಈ
4. ϦετͷεΫϩʔϧͱ࿈ಈ্ͯ͠ԼʹҠಈ͢Δ
   े෼ԼʹεΫϩʔϧͨ͠ޙͰ΋ग़ݱ͢Δ 5XJUUFS
   'BDFCPPL
   -*/&Ͱ΋࠾༻͞Ε͍ͯΔ6* l͋ͷόʔzͱ͸ 5XJUUFSը໘ͷ(*'
5. w ωΠςΟϒίʔυΛͰ͖Δ͚ͩॻ͔ͳ͍ɻωΠςΟϒͷ"1* Λࣗ෼Ͱୟ͔ͳ͍ͱ͍͏։ൃํ਑ɻ
   w ωΠςΟϒίʔυ͕૿͑Δͱ3FBDU/BUJWFͷϝϦοτ͕
   ബ͘ͳΔɻ
   w ୯७ͳ΋ͷͳΒࣗ෼Ͱॻ͍ͯ؅ཧ͢Δํ͕҆શɻ
   w ֎෦ϥΠϒϥϦ͸͍ͭϝϯς͞Εͳ͘ͳΔ͔Θ͔Βͳ͍ɻ
   w ໌֬ͳϝϦοτ͕͋Δ৔߹͸ผɻ ωΠςΟϒͷ"1*ʹ༻ҙ͞Εͯͳ͍ͷʁ
 ϥΠϒϥϦ͸࢖Θͳ͍ͷʁ
6. l͋ͷόʔzΛ࣮ݱ͢ΔͨΊʹ  ϦετͷεΫϩʔϧͱόʔͷಈ͖Λ࿈ಈͤ͞Δɻ
   ˠ
   εΫϩʔϧΠϕϯτΛ"OJNBUFE7BMVFʹϚοϓ͢Δɻ
    εΫϩʔϧҐஔʹؔ܎ͳ͘ग़ݱͰ͖Δɻ
   ˠ
   "OJNBUFE7BMVFΛՃ޻͢Δɻ
7. ɹ
   ϦετͷεΫϩʔϧͱόʔͷಈ͖Λ࿈ಈͤ͞Δɻ
   ɹ
   εΫϩʔϧҐஔʹؔ܎ͳ͘ग़ݱͰ͖Δɻ
8. nativeEvent.contentOffset.y Λ animatedValue ʹϚοϓ ݱࡏͷεΫϩʔϧҐஔ ΠϕϯτΛAnimated.ValueʹϚοϐϯά͢Δؔ਺ Animated.event(mapping, option)
9. ݱࡏͷεΫϩʔϧҐஔ෼͚ͩ
   7JFX ͋ͷόʔ ͷ:࠲ඪΛҠಈͤ͞Δ transform: [{translateY: hoge}] … hoge͚ͩY࠲ඪΛҠಈͤ͞Δ
10. ✅
    ϦετͷεΫϩʔϧͱόʔͷಈ͖Λ࿈ಈͤ͞Δɻ
11. ✅
    ϦετͷεΫϩʔϧͱόʔͷಈ͖Λ࿈ಈͤ͞Δɻ
    ɹ
    εΫϩʔϧҐஔʹؔ܎ͳ͘ग़ݱͰ͖Δɻ
12. εΫϩʔϧҐஔ όʔͷ:࠲ඪ όʔͷ:࠲ඪ
    
    εΫϩʔϧҐஔ εΫϩʔϧ͢Ε͹͢Δ΄Ͳόʔ͸Լʹ͕͍ͬͯͬͯ͞͠·͏ɻ
13. όʔͷ:࠲ඪ
    
    εΫϩʔϧҐஔ
    º
     εΫϩʔϧҐஔ όʔͷ:࠲ඪ εΫϩʔϧ͢Ε͹͢Δ΄Ͳόʔ͸্ʹ͕͍͋ͬͯ͘ɻ
14. ࢦఆͨؔ͠܎ʹैͬͯAnimated.ValueΛผͷ஋ʹม׵͢Δؔ਺ animatedValue.interpolate(config) JOQVU3BOHF
    
    9࠲ඪ
    PVUQVU3BOHF
    
    :࠲ඪ
    ͜ΕͰϦετͱόʔ͕ಉ͡ํ޲ʹεΫϩʔϧ͞ΕΔΑ͏ʹ
15. 5PPMCBS ͲͷεΫϩʔϧҐஔͰ΋ग़ݱͰ͖ΔΑ͏ʹ
    ͜͜·ͰͷॲཧͰ͸ɺόʔ͸εΫϩʔϧ͢Ε͹
    ͢Δ΄Ͳ্ʹ্͕͍ͬͯ͘ɻ
    εΫϩʔϧ͢Δͱ্ʹ͕͋Δɻ
    ͜ΕΛόʔ͕ஸ౓ӅΕΔҐஔͰࢭΊ͍ͨɻ  όʔͷߴ͞
16. Animated.Valueͷ஋Λࢦఆൣғ಺ͰͷมԽʹ੍ݶ͢Δؔ਺ Animated.diffClamp(animatedValue, min, max) NJO όʔͷߴ͞ ͔ΒNBY  ·ͰͷมԽʹ੍ݶ
    ˣ
    ͜ΕͰόʔ͕ը໘ͷ্͙͢Ͱఀࢭ͢ΔΑ͏ʹ
17. ✅
    εΫϩʔϧҐஔʹؔ܎ͳ͘ग़ݱͰ͖Δɻ
18. ✅
    ϦετͷεΫϩʔϧͱόʔͷಈ͖Λ࿈ಈͤ͞Δɻ
    ✅
    εΫϩʔϧҐஔʹؔ܎ͳ͘ग़ݱͰ͖Δɻ l͋ͷόʔz׬੒ʂ
19. ׬੒͕ͩʜ w εΫϩʔϧΠϕϯτͷऔಘ͞Εํ͕J04 "OESPJEͰඍົʹ ҟͳΔɻ
    w εΫϩʔϧҐஔʹैͬͯϦετࣗମΛΞχϝʔγϣϯ ͤ͞ΔɺͳͲ
    w ্هΛճආ͠Α͏ͱ͢Δͱϓϧμ΢ϯߋ৽࣌ͷϏϡʔ͕ݟ ͑ͳ͘ͳͬͯ͠·͏ɻ
    w Ұํཱ͕ͭͱ΋͏Ұํཱ͕ͨͣɻଥڠ͢Δ͔ํ๏Λ೧ग़ ͢Δ͔͠ͳ͍ɻ
20. ·ͱΊ w "OJNBUFE"1*ʹ͸ศརͳؔ਺͕४උ͞Ε͓ͯΓɺ୯७ͳ ΞχϝʔγϣϯͰ͋Ε͹͜ΕͰ؆୯ʹରԠͰ͖Δɻ
    w ͨͩ͠ɺҰา౿ΈࠐΜͩॲཧΛ͢Δ࣌ʹ͸J04 "OESPJEͷ ࠩҟ΍3FBDU/BUJWFͷΫηΛҙࣝͤ͟ΔΛಘͳ͍ঢ়گ͕ ΍͸Γ͋ΔͷͰ͝஫ҙɻ
    w l͋ͷόʔzͷਖ਼໊ࣜশΛ஌͍ͬͯΔํ͸ڭ͍͑ͯͩ͘͞ʜ