Fluid Interfacesの実践として、Projection手法の理解を深めていきます。
Fluid Interfaceͷ࣮ફShin Yamamoto | scenee potatotips #56
View Slide
SCENEEʢγʔχʔ)Shin Yamamoto• ʮγʔχʔʯɺϩγΞޠͰʮ੨͍ʯ(синий)ͱ͍͏ҙຯ• ϑϦʔϥϯε• NetflixͰւ֎υϥϚʹϋϚ͍ͬͯΔ• SUITS(Original)• Full House
͡Ίʹ• Fluid InterfacesͷTipsΛհ͠·͢ɻ• ӳޠͱຊޠ͕ࠞͬͯ͡·͕ྃ͢ঝ͍ͩ͘͞ɻ• গ͚͕ͩࣜ͠ొ͠·͢ɻ• ෆඋ͕͋Εɺڭ͍͑ͯͩ͘͞ʂ
Fluid Interfacesͱʁ
WWDC18Designing Fluid Interfaceshttps://developer.apple.com/videos/play/wwdc2018/803/
Ͳ͏࣮͠Α͏ʁ
OSSϥΠϒϥϦΛ࡞Ζ͏
FloatingPanel• Apple Maps, StocksͷΑ͏ͳΠϯλʔϑΣΠεΛ؆୯ʹՃͰ͖Δ• 10/17 v0.9.0 release -> v1.2.0 (ۙϦϦʔε!)• 1.4k • Mentions• iOS Dev Weekly - Issue 375 • iOS Goodies — Week 254https://github.com/SCENEE/FloatingPanel
FloatingPanelͰֶΜͩTips
Fluid Interfacesͷॏཁͳٕज़• Fast and instant response• Dynamic Behavior• Gestures in parallel
Dynamic Behavior?
UIScrollView
Seamless Scrolling• ׳Ε͠Μͩڞ௨ೝࣝͷ͋ΔϞʔγϣϯ• ৺Α͍ఆຎࡲʹΑΔݮͱɺόϯε• ໌֬ͳఀࢭͷͳ͍Ϟʔγϣϯ• ༧ଌՄೳͳಈ͖
Seamless Scrollingͷٕज़ཁૉ•Deceleration•Bounciness
Seamless Scrollingͷٕज़ཁૉ•Projection•Dynamic Spring Animation
Projection
ͳͥ͜ΕͰࢉग़͞ΕΔͷʁ
p′ = p0+∫t0v(t) dtv(t) = v0dtd : Deceleration rate(ݮ: 0.998)p : Coordinate(ϏϡʔͷҐஔ)v0 : ॳͨͩ͠ɺ t[msec] ≥ 1
p′ = p0+ ⟮v0dt∑k=1dk−1⟯v(t) = v0dtd : Deceleration rate(ݮ: 0.998)p : Coordinate(ϏϡʔͷҐஔ)v0 : ॳͨͩ͠ɺ t[msec] ≥ 1
p′ = p0+ ⟮v0dt∑k=1dk−1⟯p′ = p0+ v0d11 − d∞∑k=0ark =a1 − rwhen |r| < 1.
p′ = p0+ v0d11 − d
ProjectionΛ׆༻͢Δ• ͋ΔॳΛ࣋ͭϏϡʔ͕ɺ͋ΔݮൺͰఀࢭ(ऩଋ)͢ΔҐஔ• Ϣʔβʔ͕ϏϡʔΛಈ͔ͦ͏ͱͨ͠Ґஔ(ҙࢥ)• ݮൺΛௐ͢ΔͱɺϏϡʔͷॏ͕͞ม͑ΒΕΔ
ProjectionΛ׆༻͢Δ
ProjectionΛ׆༻͢Δ• Pan Gesture velocity: pt / seconds• ScrollView velocity: pt / millisecondsmilliseconds
·ͱΊ• Fluid Interfacesͷؔ৺͕ߴ·͍ͬͯΔ• ScrollViewϓϦϛςΟϒͳFluid Interface• Projectionख๏Λ͔ࣜΒཧղ
ͦͷଞػձ͕͋Ε• Dynamic Spring Animation/ Rubber bandingͷ࣮ํ๏• Seamless ScrollingͷͨΊͷTips• Fluid InterfacesͷͨΊͷδΣενϟʔϋϯυϦϯά• Fluid Interfaces࣮ݱʹ͚ͯɺσβΠφʔͱΤϯδχΞ͕ؾΛ͚ͭΔ͖ઃܭͷϙΠϯτͳͲͳͲ
Fluid Interfaces Practice