Fluid Interfacesの実践

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