Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fluid interfaces for Monaca

774a937b74096e82576b37678d00aeca?s=47 Daisuke Kishino
December 13, 2018

Fluid interfaces for Monaca

774a937b74096e82576b37678d00aeca?s=128

Daisuke Kishino

December 13, 2018
Tweet

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アプリに実装していく!(ネイティブに負けないように)