$30 off During Our Annual Pro Sale. View Details »

Fluid Interfacesの実践

Shin Yamamoto
November 15, 2018

Fluid Interfacesの実践

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

Shin Yamamoto

November 15, 2018
Tweet

More Decks by Shin Yamamoto

Other Decks in Programming

Transcript

  1. Fluid Interfaceͷ࣮ફ
    Shin Yamamoto | scenee

    potatotips #56

    View Slide

  2. SCENEEʢγʔχʔ)
    Shin Yamamoto
    • ʮγʔχʔʯ͸ɺϩγΞޠͰʮ੨͍ʯ(синий)ͱ͍͏ҙຯ

    • ϑϦʔϥϯε

    • NetflixͰւ֎υϥϚʹϋϚ͍ͬͯΔ

    • SUITS(Original)

    • Full House

    View Slide

  3. ͸͡Ίʹ
    • Fluid InterfacesͷTipsΛ঺հ͠·͢ɻ

    • ӳޠͱ೔ຊޠ͕ࠞͬͯ͡·͕ྃ͢ঝ͍ͩ͘͞ɻ

    • গ͚ͩ͠਺͕ࣜొ৔͠·͢ɻ

    • ෆඋ͕͋Ε͹ɺڭ͍͑ͯͩ͘͞ʂ

    View Slide

  4. Fluid Interfacesͱ͸ʁ

    View Slide

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

    View Slide

  6. Ͳ͏࣮૷͠Α͏ʁ

    View Slide

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

    View Slide

  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

    View Slide

  9. View Slide

  10. FloatingPanelͰֶΜͩ
    Tips

    View Slide

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

    • Dynamic Behavior

    • Gestures in parallel

    View Slide

  12. Fluid Interfacesͷॏཁͳٕज़
    • Fast and instant response

    • Dynamic Behavior
    • Gestures in parallel

    View Slide

  13. Dynamic Behavior?

    View Slide

  14. UIScrollView

    View Slide

  15. Seamless Scrolling
    • ׳Ε਌͠Μͩڞ௨ೝࣝͷ͋ΔϞʔγϣϯ

    • ৺஍Α͍ఆຎࡲʹΑΔݮ଎ͱɺό΢ϯε

    • ໌֬ͳఀࢭͷͳ͍Ϟʔγϣϯ

    • ༧ଌՄೳͳಈ͖

    View Slide

  16. Seamless Scrolling
    • ׳Ε਌͠Μͩڞ௨ೝࣝͷ͋ΔϞʔγϣϯ

    • ৺஍Α͍ఆຎࡲʹΑΔݮ଎ͱɺό΢ϯε

    • ໌֬ͳఀࢭͷͳ͍Ϟʔγϣϯ

    • ༧ଌՄೳͳಈ͖

    View Slide

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

    •Bounciness

    View Slide

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

    View Slide

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

    View Slide

  20. Projection

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. ͳͥ͜ΕͰࢉग़͞ΕΔͷʁ

    View Slide

  25. View Slide

  26. View Slide

  27. p′ = p0
    +

    t
    0
    v(t) dt
    v(t) = v0
    dt
    d : Deceleration rate(ݮ଎཰: 0.998)

    p : Coordinate(ϏϡʔͷҐஔ)

    v0 : ॳ଎౓

    ͨͩ͠ɺ t[msec] ≥ 1

    View Slide

  28. p′ = p0
    +

    t
    0
    v(t) dt
    v(t) = v0
    dt
    d : Deceleration rate(ݮ଎཰: 0.998)

    p : Coordinate(ϏϡʔͷҐஔ)

    v0 : ॳ଎౓

    ͨͩ͠ɺ t[msec] ≥ 1

    View Slide

  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

    View Slide

  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.

    View Slide

  31. p′ = p0
    + v0
    d
    1
    1 − d

    View Slide

  32. ProjectionΛ׆༻͢Δ
    • ͋Δॳ଎౓Λ࣋ͭϏϡʔ͕ɺ͋Δݮ଎ൺ཰Ͱఀࢭ(ऩଋ)͢ΔҐஔ

    • Ϣʔβʔ͕ϏϡʔΛಈ͔ͦ͏ͱͨ͠Ґஔ(ҙࢥ)

    • ݮ଎ൺ཰Λௐ੔͢ΔͱɺϏϡʔͷॏ͕͞ม͑ΒΕΔ

    View Slide

  33. ProjectionΛ׆༻͢Δ

    View Slide

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

    • ScrollView velocity: pt / milliseconds
    milliseconds

    View Slide

  35. ·ͱΊ
    • Fluid Interfaces΁ͷؔ৺͕ߴ·͍ͬͯΔ

    • ScrollView͸ϓϦϛςΟϒͳFluid Interface

    • Projectionख๏Λ਺͔ࣜΒཧղ

    View Slide

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

    • Seamless ScrollingͷͨΊͷTips

    • Fluid InterfacesͷͨΊͷδΣενϟʔϋϯυϦϯά

    • Fluid Interfaces࣮ݱʹ޲͚ͯɺσβΠφʔͱΤϯδχΞ͕ؾ
    Λ͚ͭΔ΂͖ઃܭͷϙΠϯτ

    ͳͲͳͲ

    View Slide

  37. Fluid Interfaces Practice

    View Slide