Fluid Interfacesの実践

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

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
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
24. ͳͥ͜ΕͰࢉग़͞ΕΔͷʁ
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