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.6k
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
500
DocCのドキュメントをGithub Pagesで公開する
scenee
2
650
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
630
Introducing Relax
scenee
0
570
Potatotips#7: Box C String Tip
scenee
0
2.8k
Other Decks in Programming
See All in Programming
Langfuseと歩む生成AI活用推進
licux
3
320
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
370
AI時代のUIはどこへ行く?
yusukebe
11
6.1k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
310
AIでLINEスタンプを作ってみた
eycjur
1
220
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
350
Updates on MLS on Ruby (and maybe more)
sylph01
1
170
個人軟體時代
ethanhuang13
0
290
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
370
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
350
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Designing for Performance
lara
610
69k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
The Language of Interfaces
destraynor
160
25k
Thoughts on Productivity
jonyablonski
69
4.8k
What's in a price? How to price your products and services
michaelherold
246
12k
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