Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fluid Interfacesの実践
Search
Shin Yamamoto
November 15, 2018
Programming
4
1.4k
Fluid Interfacesの実践
Fluid Interfacesの実践として、Projection手法の理解を深めていきます。
Shin Yamamoto
November 15, 2018
Tweet
Share
More Decks by Shin Yamamoto
See All by Shin Yamamoto
Meet CoreDevice and devicectl
scenee
0
120
DocCのドキュメントをGithub Pagesで公開する
scenee
2
520
SwiftライブラリのObjC対応における落とし穴と回避策
scenee
0
250
Testing a constraint-based layout of UIView
scenee
1
1.1k
Playing Sheet presentation style on iOS 13
scenee
0
530
Introducing Relax
scenee
0
490
Potatotips#7: Box C String Tip
scenee
0
2.7k
Other Decks in Programming
See All in Programming
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
見た目から始める生産性向上
ikumatadokoro
7
850
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
340
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
330
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
250
Ruby Function Composition
bkuhlmann
1
330
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
940
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Designing with Data
zakiwarfel
96
4.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Adopting Sorbet at Scale
ufuk
68
8.6k
The Invisible Customer
myddelton
114
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Building an army of robots
kneath
300
41k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Teambox: Starting and Learning
jrom
128
8.4k
Transcript
Fluid Interfaceͷ࣮ફ Shin Yamamoto | scenee potatotips #56
SCENEEʢγʔχʔ) Shin Yamamoto • ʮγʔχʔʯɺϩγΞޠͰʮ੨͍ʯ(синий)ͱ͍͏ҙຯ • ϑϦʔϥϯε • NetflixͰւ֎υϥϚʹϋϚ͍ͬͯΔ •
SUITS(Original) • Full House
͡Ίʹ • Fluid InterfacesͷTipsΛհ͠·͢ɻ • ӳޠͱຊޠ͕ࠞͬͯ͡·͕ྃ͢ঝ͍ͩ͘͞ɻ • গ͚͕ͩࣜ͠ొ͠·͢ɻ • ෆඋ͕͋Εɺڭ͍͑ͯͩ͘͞ʂ
Fluid Interfacesͱʁ
WWDC18 Designing Fluid Interfaces https://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 254 https://github.com/SCENEE/FloatingPanel
None
FloatingPanelͰֶΜͩ Tips
Fluid Interfacesͷॏཁͳٕज़ • Fast and instant response • Dynamic Behavior
• Gestures in parallel
Fluid Interfacesͷॏཁͳٕज़ • Fast and instant response • Dynamic Behavior
• Gestures in parallel
Dynamic Behavior?
UIScrollView
Seamless Scrolling • ׳Ε͠Μͩڞ௨ೝࣝͷ͋ΔϞʔγϣϯ • ৺Α͍ఆຎࡲʹΑΔݮͱɺόϯε • ໌֬ͳఀࢭͷͳ͍Ϟʔγϣϯ • ༧ଌՄೳͳಈ͖
Seamless Scrolling • ׳Ε͠Μͩڞ௨ೝࣝͷ͋ΔϞʔγϣϯ • ৺Α͍ఆຎࡲʹΑΔݮͱɺόϯε • ໌֬ͳఀࢭͷͳ͍Ϟʔγϣϯ • ༧ଌՄೳͳಈ͖
Seamless Scrollingͷٕज़ཁૉ •Deceleration •Bounciness
Seamless Scrollingͷٕज़ཁૉ •Deceleration •Bounciness
Seamless Scrollingͷٕज़ཁૉ •Projection •Dynamic Spring Animation
Projection
None
None
None
ͳͥ͜ΕͰࢉग़͞ΕΔͷʁ
None
None
p′ = p0 + ∫ t 0 v(t) dt v(t)
= v0 dt d : Deceleration rate(ݮ: 0.998) p : Coordinate(ϏϡʔͷҐஔ) v0 : ॳ ͨͩ͠ɺ t[msec] ≥ 1
p′ = p0 + ∫ t 0 v(t) dt v(t)
= v0 dt d : Deceleration rate(ݮ: 0.998) p : Coordinate(ϏϡʔͷҐஔ) v0 : ॳ ͨͩ͠ɺ t[msec] ≥ 1
p′ = p0 + ⟮v0 d t ∑ k=1 dk−1⟯
v(t) = v0 dt d : Deceleration rate(ݮ: 0.998) p : Coordinate(ϏϡʔͷҐஔ) v0 : ॳ ͨͩ͠ɺ t[msec] ≥ 1
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.
p′ = p0 + v0 d 1 1 − d
ProjectionΛ׆༻͢Δ • ͋ΔॳΛ࣋ͭϏϡʔ͕ɺ͋ΔݮൺͰఀࢭ(ऩଋ)͢ΔҐஔ • Ϣʔβʔ͕ϏϡʔΛಈ͔ͦ͏ͱͨ͠Ґஔ(ҙࢥ) • ݮൺΛௐ͢ΔͱɺϏϡʔͷॏ͕͞ม͑ΒΕΔ
ProjectionΛ׆༻͢Δ
ProjectionΛ׆༻͢Δ • Pan Gesture velocity: pt / seconds • ScrollView
velocity: pt / milliseconds milliseconds
·ͱΊ • Fluid Interfacesͷؔ৺͕ߴ·͍ͬͯΔ • ScrollViewϓϦϛςΟϒͳFluid Interface • Projectionख๏Λ͔ࣜΒཧղ
ͦͷଞػձ͕͋Ε • Dynamic Spring Animation/ Rubber bandingͷ࣮ํ๏ • Seamless ScrollingͷͨΊͷTips
• Fluid InterfacesͷͨΊͷδΣενϟʔϋϯυϦϯά • Fluid Interfaces࣮ݱʹ͚ͯɺσβΠφʔͱΤϯδχΞ͕ؾ Λ͚ͭΔ͖ઃܭͷϙΠϯτ ͳͲͳͲ
Fluid Interfaces Practice