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
470
DocCのドキュメントをGithub Pagesで公開する
scenee
2
620
SwiftライブラリのObjC対応における落とし穴と回避策
scenee
0
300
Testing a constraint-based layout of UIView
scenee
1
1.3k
Playing Sheet presentation style on iOS 13
scenee
0
610
Introducing Relax
scenee
0
550
Potatotips#7: Box C String Tip
scenee
0
2.8k
Other Decks in Programming
See All in Programming
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
180
VS Code Update for GitHub Copilot
74th
1
470
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
510
ニーリーにおけるプロダクトエンジニア
nealle
0
590
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
580
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
5つのアンチパターンから学ぶLT設計
narihara
1
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Select API from Kotlin Coroutine
jmatsu
1
190
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Music & Morning Musume
bryan
46
6.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Optimizing for Happiness
mojombo
379
70k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
RailsConf 2023
tenderlove
30
1.1k
Unsuck your backbone
ammeep
671
58k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
How to Ace a Technical Interview
jacobian
277
23k
Making the Leap to Tech Lead
cromwellryan
134
9.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