Fluid interfaces for Monaca

by Daisuke Kishino

Slide 1

Slide 1 text

Fluid interfaces for Monaca Monaca UG OKAYAMA#3 Daisuke Kishino

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

A tool that feels like an extension of your mind 思考の延長のように感じるツール (＝体の一部のように感じるインターフェース)

Slide 4

Slide 4 text

•Redirectable •Seamless Motion •Monacaで実装

Slide 5

Slide 5 text

Redirectable

Slide 6

Slide 6 text

iPhone 8 iPhone X

Slide 7

Slide 7 text

考えてから動かす考える決定する動かす離す

Slide 8

Slide 8 text

考えながら動かす考える決定する動かす離す

Slide 9

Slide 9 text

Swipe Back

Slide 10

Slide 10 text

Modal (YouTube)

Slide 11

Slide 11 text

Seamless Motion

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Spring Animation (ばね)

Slide 14

Slide 14 text

•減衰比(damping ratio) •周波数応答(frequency) http://dynamicsjs.com/

Slide 15

Slide 15 text

Apple Music

Slide 16

Slide 16 text

Monacaで実装

Slide 17

Slide 17 text

YouTubeライクなUI

Slide 18

Slide 18 text

減衰比100% 減衰比80%

Slide 19

Slide 19 text

タッチ開始時点の座標タッチ開始時点のモーダル位置スワイプ分モーダル位置を変更表示範囲内なら、実際にを更新タッチ終了時に画面半分下ならモーダルを最小化する ‘ ’ 減衰比80%でアニメーション実行画面半分以上ならモーダルを最大化する ‘ ’ 減衰比100%でアニメーション実行

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

ハマった点

Slide 22

Slide 22 text

• スクロールとの兼ね合い • モーダルを閉じている間は、スクロールできないようにする(Event.preventDefault) • タッチイベントは画像のみに設定する

Slide 23

Slide 23 text

https://github.com/kishino/fluid-interfaces-sample

Slide 24

Slide 24 text

まとめ

Slide 25

Slide 25 text

• Fluid interfacesはこれまでもあったし、これからより普及する • HTML/JS/CSSでも実現は可能(実装コストはかかる) • 少しずつでもMonacaアプリに実装していく！(ネイティブに負けないように)