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
480
DocCのドキュメントをGithub Pagesで公開する
scenee
2
640
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
620
Introducing Relax
scenee
0
560
Potatotips#7: Box C String Tip
scenee
0
2.8k
Other Decks in Programming
See All in Programming
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
Go製CLIツールをnpmで配布するには
syumai
0
800
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
710
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.2k
JetBrainsのAI機能の紹介 #jjug
yusuke
0
120
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
390
型で語るカタ
irof
1
860
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
1k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf 2023
tenderlove
30
1.2k
BBQ
matthewcrist
89
9.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
4 Signs Your Business is Dying
shpigford
184
22k
Become a Pro
speakerdeck
PRO
29
5.4k
Speed Design
sergeychernyshev
32
1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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