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.5k
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
400
DocCのドキュメントをGithub Pagesで公開する
scenee
2
600
SwiftライブラリのObjC対応における落とし穴と回避策
scenee
0
280
Testing a constraint-based layout of UIView
scenee
1
1.2k
Playing Sheet presentation style on iOS 13
scenee
0
600
Introducing Relax
scenee
0
530
Potatotips#7: Box C String Tip
scenee
0
2.7k
Other Decks in Programming
See All in Programming
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
280
自力でTTSモデルを作った話
zgock999
0
110
SwiftUI Viewの責務分離
elmetal
PRO
2
280
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
390
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
PRレビューのお供にDanger
stoticdev
1
240
Domain-Driven Design (Tutorial)
hschwentner
13
22k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
940
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
170
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Building Applications with DynamoDB
mza
93
6.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
The Invisible Side of Design
smashingmag
299
50k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Six Lessons from altMBA
skipperchong
27
3.6k
Docker and Python
trallard
44
3.3k
The Cult of Friendly URLs
andyhume
78
6.2k
It's Worth the Effort
3n
184
28k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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