Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Keigo Ebihara
January 17, 2019
290

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

Keigo Ebihara

January 17, 2019
Tweet

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) JOQVU3BOHF9࠲ඪ 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ͷਖ਼໊ࣜশΛ஌͍ͬͯΔํ͸ڭ͍͑ͯͩ͘͞ʜ