Fluid interfaces for Monaca

1. Fluid interfaces for Monaca Monaca UG OKAYAMA#3 Daisuke Kishino
3. A tool that feels like an extension of your mind 思考の延長のように感じるツール (＝体の一部のように感じるインターフェース)
4. •Redirectable •Seamless Motion •Monacaで実装
5. Redirectable
6. iPhone 8 iPhone X
7. 考えてから動かす 考える 決定する 動かす 離す
8. 考えながら動かす 考える 決定する 動かす 離す
9. Swipe Back
10. Modal (YouTube)
11. Seamless Motion
13. Spring Animation (ばね)
14. •減衰比(damping ratio) •周波数応答(frequency) http://dynamicsjs.com/
15. Apple Music
16. Monacaで実装
17. YouTubeライクなUI
18. 減衰比100% 減衰比80%
19. タッチ開始時点の 座標 タッチ開始時点のモーダル 位置 スワイプ分モーダル 位置を変更 表示範囲内なら、実際に を更新 タッチ終了時に画面半分下ならモーダルを最小化する ‘ ’ 減衰比80%でアニメーション実行 画面半分以上ならモーダルを最大化する ‘ ’ 減衰比100%でアニメーション実行
21. ハマった点
22. • スクロールとの兼ね合い • モーダルを閉じている間は、スクロールできないよう にする(Event.preventDefault) • タッチイベントは画像のみに設定する
23. https://github.com/kishino/fluid-interfaces-sample
24. まとめ
25. • Fluid interfacesはこれまでもあったし、これからより普及する • HTML/JS/CSSでも実現は可能(実装コストはかかる) • 少しずつでもMonacaアプリに実装していく！(ネイティブに負けないように)