Fluid Interfacesの実践

by Shin Yamamoto

Slide 1

Slide 1 text

Fluid Interfaceͷ࣮ફ Shin Yamamoto | scenee potatotips #56

Slide 2

Slide 2 text

SCENEEʢγʔχʔ) Shin Yamamoto • ʮγʔχʔʯ͸ɺϩγΞޠͰʮ੨͍ʯ(синий)ͱ͍͏ҙຯ • ϑϦʔϥϯε • NetﬂixͰւ֎υϥϚʹϋϚ͍ͬͯΔ • 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