Fluid interfaces for Monaca

Transcript

1. Fluid interfaces for Monaca Monaca UG OKAYAMA#3 Daisuke Kishino

2. None

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

12. None

13. Spring Animation (ばね)

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

15. Apple Music

16. Monacaで実装

17. YouTubeライクなUI

18. 減衰比100% 減衰比80%

19. タッチ開始時点の 座標 タッチ開始時点のモーダル 位置 スワイプ分モーダル 位置を変更 表示範囲内なら、実際に を更新 タッチ終了時に画面半分下ならモーダルを最小化する ‘

    ’ 減衰比80%でアニメーション実行 画面半分以上ならモーダルを最大化する ‘ ’ 減衰比100%でアニメーション実行
20. None

21. ハマった点

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

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

24. まとめ

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