Fluid Interfacesの実践
by
Shin Yamamoto
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Fluid Interfaceͷ࣮ફ Shin Yamamoto | scenee potatotips #56
Slide 2
Slide 2 text
SCENEEʢγʔχʔ) Shin Yamamoto • ʮγʔχʔʯɺϩγΞޠͰʮ੨͍ʯ(синий)ͱ͍͏ҙຯ • ϑϦʔϥϯε • NetflixͰւ֎υϥϚʹϋϚ͍ͬͯΔ • SUITS(Original) • Full House
Slide 3
Slide 3 text
͡Ίʹ • Fluid InterfacesͷTipsΛհ͠·͢ɻ • ӳޠͱຊޠ͕ࠞͬͯ͡·͕ྃ͢ঝ͍ͩ͘͞ɻ • গ͚͕ͩࣜ͠ొ͠·͢ɻ • ෆඋ͕͋Εɺڭ͍͑ͯͩ͘͞ʂ
Slide 4
Slide 4 text
Fluid Interfacesͱʁ
Slide 5
Slide 5 text
WWDC18 Designing Fluid Interfaces https://developer.apple.com/videos/play/wwdc2018/803/
Slide 6
Slide 6 text
Ͳ͏࣮͠Α͏ʁ
Slide 7
Slide 7 text
OSSϥΠϒϥϦΛ࡞Ζ͏
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
FloatingPanelͰֶΜͩ Tips
Slide 11
Slide 11 text
Fluid Interfacesͷॏཁͳٕज़ • Fast and instant response • Dynamic Behavior • Gestures in parallel
Slide 12
Slide 12 text
Fluid Interfacesͷॏཁͳٕज़ • Fast and instant response • Dynamic Behavior • Gestures in parallel
Slide 13
Slide 13 text
Dynamic Behavior?
Slide 14
Slide 14 text
UIScrollView
Slide 15
Slide 15 text
Seamless Scrolling • ׳Ε͠Μͩڞ௨ೝࣝͷ͋ΔϞʔγϣϯ • ৺Α͍ఆຎࡲʹΑΔݮͱɺόϯε • ໌֬ͳఀࢭͷͳ͍Ϟʔγϣϯ • ༧ଌՄೳͳಈ͖
Slide 16
Slide 16 text
Seamless Scrolling • ׳Ε͠Μͩڞ௨ೝࣝͷ͋ΔϞʔγϣϯ • ৺Α͍ఆຎࡲʹΑΔݮͱɺόϯε • ໌֬ͳఀࢭͷͳ͍Ϟʔγϣϯ • ༧ଌՄೳͳಈ͖
Slide 17
Slide 17 text
Seamless Scrollingͷٕज़ཁૉ •Deceleration •Bounciness
Slide 18
Slide 18 text
Seamless Scrollingͷٕज़ཁૉ •Deceleration •Bounciness
Slide 19
Slide 19 text
Seamless Scrollingͷٕज़ཁૉ •Projection •Dynamic Spring Animation
Slide 20
Slide 20 text
Projection
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
ͳͥ͜ΕͰࢉग़͞ΕΔͷʁ
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
p′ = p0 + ∫ t 0 v(t) dt v(t) = v0 dt d : Deceleration rate(ݮ: 0.998) p : Coordinate(ϏϡʔͷҐஔ) v0 : ॳ ͨͩ͠ɺ t[msec] ≥ 1
Slide 28
Slide 28 text
p′ = p0 + ∫ t 0 v(t) dt v(t) = v0 dt d : Deceleration rate(ݮ: 0.998) p : Coordinate(ϏϡʔͷҐஔ) v0 : ॳ ͨͩ͠ɺ t[msec] ≥ 1
Slide 29
Slide 29 text
p′ = p0 + ⟮v0 d t ∑ k=1 dk−1⟯ v(t) = v0 dt d : Deceleration rate(ݮ: 0.998) p : Coordinate(ϏϡʔͷҐஔ) v0 : ॳ ͨͩ͠ɺ t[msec] ≥ 1
Slide 30
Slide 30 text
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.
Slide 31
Slide 31 text
p′ = p0 + v0 d 1 1 − d
Slide 32
Slide 32 text
ProjectionΛ׆༻͢Δ • ͋ΔॳΛ࣋ͭϏϡʔ͕ɺ͋ΔݮൺͰఀࢭ(ऩଋ)͢ΔҐஔ • Ϣʔβʔ͕ϏϡʔΛಈ͔ͦ͏ͱͨ͠Ґஔ(ҙࢥ) • ݮൺΛௐ͢ΔͱɺϏϡʔͷॏ͕͞ม͑ΒΕΔ
Slide 33
Slide 33 text
ProjectionΛ׆༻͢Δ
Slide 34
Slide 34 text
ProjectionΛ׆༻͢Δ • Pan Gesture velocity: pt / seconds • ScrollView velocity: pt / milliseconds milliseconds
Slide 35
Slide 35 text
·ͱΊ • Fluid Interfacesͷؔ৺͕ߴ·͍ͬͯΔ • ScrollViewϓϦϛςΟϒͳFluid Interface • Projectionख๏Λ͔ࣜΒཧղ
Slide 36
Slide 36 text
ͦͷଞػձ͕͋Ε • Dynamic Spring Animation/ Rubber bandingͷ࣮ํ๏ • Seamless ScrollingͷͨΊͷTips • Fluid InterfacesͷͨΊͷδΣενϟʔϋϯυϦϯά • Fluid Interfaces࣮ݱʹ͚ͯɺσβΠφʔͱΤϯδχΞ͕ؾ Λ͚ͭΔ͖ઃܭͷϙΠϯτ ͳͲͳͲ
Slide 37
Slide 37 text
Fluid Interfaces Practice