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

Fluid Interfacesの実践

0e726052fdb28ba1c004aa90eccbe261?s=47 Shin Yamamoto
November 15, 2018

Fluid Interfacesの実践

Fluid Interfacesの実践として、Projection手法の理解を深めていきます。

0e726052fdb28ba1c004aa90eccbe261?s=128

Shin Yamamoto

November 15, 2018
Tweet

Transcript

  1. Fluid Interfaceͷ࣮ફ Shin Yamamoto | scenee potatotips #56

  2. SCENEEʢγʔχʔ) Shin Yamamoto • ʮγʔχʔʯ͸ɺϩγΞޠͰʮ੨͍ʯ(синий)ͱ͍͏ҙຯ • ϑϦʔϥϯε • NetflixͰւ֎υϥϚʹϋϚ͍ͬͯΔ •

    SUITS(Original) • Full House
  3. ͸͡Ίʹ • Fluid InterfacesͷTipsΛ঺հ͠·͢ɻ • ӳޠͱ೔ຊޠ͕ࠞͬͯ͡·͕ྃ͢ঝ͍ͩ͘͞ɻ • গ͚ͩ͠਺͕ࣜొ৔͠·͢ɻ • ෆඋ͕͋Ε͹ɺڭ͍͑ͯͩ͘͞ʂ

  4. Fluid Interfacesͱ͸ʁ

  5. WWDC18 Designing Fluid Interfaces https://developer.apple.com/videos/play/wwdc2018/803/

  6. Ͳ͏࣮૷͠Α͏ʁ

  7. OSSϥΠϒϥϦΛ࡞Ζ͏

  8. FloatingPanel • Apple Maps, StocksͷΑ͏ͳΠϯλʔϑΣΠεΛ؆୯ʹ௥Ճ Ͱ͖Δ • 10/17 v0.9.0 release

    -> v1.2.0 (ۙ೔ϦϦʔε!) • 1.4k • Mentions • iOS Dev Weekly - Issue 375 • iOS Goodies — Week 254 https://github.com/SCENEE/FloatingPanel
  9. None
  10. FloatingPanelͰֶΜͩ Tips

  11. Fluid Interfacesͷॏཁͳٕज़ • Fast and instant response • Dynamic Behavior

    • Gestures in parallel
  12. Fluid Interfacesͷॏཁͳٕज़ • Fast and instant response • Dynamic Behavior

    • Gestures in parallel
  13. Dynamic Behavior?

  14. UIScrollView

  15. Seamless Scrolling • ׳Ε਌͠Μͩڞ௨ೝࣝͷ͋ΔϞʔγϣϯ • ৺஍Α͍ఆຎࡲʹΑΔݮ଎ͱɺό΢ϯε • ໌֬ͳఀࢭͷͳ͍Ϟʔγϣϯ • ༧ଌՄೳͳಈ͖

  16. Seamless Scrolling • ׳Ε਌͠Μͩڞ௨ೝࣝͷ͋ΔϞʔγϣϯ • ৺஍Α͍ఆຎࡲʹΑΔݮ଎ͱɺό΢ϯε • ໌֬ͳఀࢭͷͳ͍Ϟʔγϣϯ • ༧ଌՄೳͳಈ͖

  17. Seamless Scrollingͷٕज़ཁૉ •Deceleration •Bounciness

  18. Seamless Scrollingͷٕज़ཁૉ •Deceleration •Bounciness

  19. Seamless Scrollingͷٕज़ཁૉ •Projection •Dynamic Spring Animation

  20. Projection

  21. None
  22. None
  23. None
  24. ͳͥ͜ΕͰࢉग़͞ΕΔͷʁ

  25. None
  26. None
  27. p′ = p0 + ∫ t 0 v(t) dt v(t)

    = v0 dt d : Deceleration rate(ݮ଎཰: 0.998) p : Coordinate(ϏϡʔͷҐஔ) v0 : ॳ଎౓ ͨͩ͠ɺ t[msec] ≥ 1
  28. p′ = p0 + ∫ t 0 v(t) dt v(t)

    = v0 dt d : Deceleration rate(ݮ଎཰: 0.998) p : Coordinate(ϏϡʔͷҐஔ) v0 : ॳ଎౓ ͨͩ͠ɺ t[msec] ≥ 1
  29. p′ = p0 + ⟮v0 d t ∑ k=1 dk−1⟯

    v(t) = v0 dt d : Deceleration rate(ݮ଎཰: 0.998) p : Coordinate(ϏϡʔͷҐஔ) v0 : ॳ଎౓ ͨͩ͠ɺ t[msec] ≥ 1
  30. p′ = p0 + ⟮v0 d t ∑ k=1 dk−1⟯

    p′ = p0 + v0 d 1 1 − d ∞ ∑ k=0 ark = a 1 − r when |r| < 1.
  31. p′ = p0 + v0 d 1 1 − d

  32. ProjectionΛ׆༻͢Δ • ͋Δॳ଎౓Λ࣋ͭϏϡʔ͕ɺ͋Δݮ଎ൺ཰Ͱఀࢭ(ऩଋ)͢ΔҐஔ • Ϣʔβʔ͕ϏϡʔΛಈ͔ͦ͏ͱͨ͠Ґஔ(ҙࢥ) • ݮ଎ൺ཰Λௐ੔͢ΔͱɺϏϡʔͷॏ͕͞ม͑ΒΕΔ

  33. ProjectionΛ׆༻͢Δ

  34. ProjectionΛ׆༻͢Δ • Pan Gesture velocity: pt / seconds • ScrollView

    velocity: pt / milliseconds milliseconds
  35. ·ͱΊ • Fluid Interfaces΁ͷؔ৺͕ߴ·͍ͬͯΔ • ScrollView͸ϓϦϛςΟϒͳFluid Interface • Projectionख๏Λ਺͔ࣜΒཧղ

  36. ͦͷଞػձ͕͋Ε͹ • Dynamic Spring Animation/ Rubber bandingͷ࣮૷ํ๏ • Seamless ScrollingͷͨΊͷTips

    • Fluid InterfacesͷͨΊͷδΣενϟʔϋϯυϦϯά • Fluid Interfaces࣮ݱʹ޲͚ͯɺσβΠφʔͱΤϯδχΞ͕ؾ Λ͚ͭΔ΂͖ઃܭͷϙΠϯτ ͳͲͳͲ
  37. Fluid Interfaces Practice