FlowComponentでカンタン画面遷移

サンプルFramerファイル
サンプルSketchファイル

Framerの長所は細やかなインタラクションが作れることですが、逆にカンタンな画面遷移が作りづらいことがFramerの弱点でしたが、FlowComponentがリリースされたおかげで最近はその弱点も克服されつつあります。

初期設定

#Flow Componentを作成します。ページを入れておく容器のようなものです。
flow = new FlowComponent

#レイヤーA（ページ）を表示する
flow.showNext(layerA, animate: true)

指定したページに遷移する　showNext("移動先のレイヤー名")

flowComponentの中身を入れ替えて、指定したページを表示します。加えてオプションでは

• animateの有無
• （ページ要素が大きい時は）scrollの有無

を設定することができます。

一つ前のページに戻る　showPrevious()

では、逆に今来たページを戻る時はどうするのでしょうか？
そんな時はshowPrevious()を使います

back1ボタンレイヤーをクリックした際に一つ前のレイヤーに戻るコードが書けました。()をつけ忘れることが多いので気をつけて下さい。

showNextと違い以前の画面がどの画面であったかをいちいち考えて指定する必要がないので、showPreviousの便利なところです。

showNextとshowPreviousを駆使して、下のような画面遷移はすぐに作ることができます。
サンプルFramerファイル