Framer + RemixでWebサイトをつくる #7 - 画面を増やして遷移してみる
引き続き開催しているもくもく会「Kamakura MokMok Hack」のサイトをFramer + Remixでつくっていきます。
サイトの要件などに興味ある方は1日目の記事をご覧ください。
7日目 - 画面を増やして遷移できるようにする
さてやっと7日目です。自分ではじめたこととはいえ、誰の何のためにこれを書いているのか段々自分でもよくわからなくなってきました…。一応目的としては、ReactでWebアプリケーション開発しているとReactフレンドリーなFramerが自分には使いやすく、またHandshake機能の登場やそもそもFigmaのUIが使いにくい…などでFramerを自分が関わるプロジェクトに導入したい時に口頭で説明してもピンとこない人たち向けに書いているところがあります。
というわけで本題です。
画面と遷移用のボタンを追加する
とりあえず画面遷移の例を示したいので適当な画面をつくりました（わかりやすい様に青色の背景にしています）。画面は Screen という名前にしていましたが、遷移用にそれぞれ 紹介ページをIntroduction、イベントページをEventsとしました。
また、画面全体の余白についてもPage Wrapper(Stack)でラップして画面上部と下部にPaddingをTop: 80px追加し、Gapを40px に設定しました。
それから、遷移を試すために適当なボタンをつくりました。
遷移の設定をする
遷移する際のトリガーをつくる
遷移させるには、遷移イベントをアサインしトリガーとしたいオブジェクトを選択して右のコンパネの「Intaractions」の+ボタンをクリックすると、いくつかの選択肢が出てきます。任意の画面へ選択させたい場合は Transition を選びます。
遷移トリガーのイベント
トリガーにはいくつかイベントを設定できます。Onの項目からイベントを選びます。
尚、デザインオブジェクト（FrameやStack, Component）にのみ設定できるものや、画面のみに設定できるものなどいくつか制限はあります。
| イベント | 説明 |
|---|---|
| Tap | クリックまたはタップイベントです。実際はクリックまたはタップが終わった瞬間なのでTap End |
| Tap Start | クリックまたはタップイベント開始の瞬間 |
| Appear | 画面が表示した時 |
| Key&Gamepad | 任意のキーボードまたはゲームパッドのボタンが押下された時 |
| Mouse Enter | 画面、または任意Frameにマウスカーソルが重なった時 |
| Mouse Leave | 画面、または任意Frameからマウスカーソルが離れた時 |
遷移のタイミングを変える
遷移にはDelay（遅延時間:秒）を設定できます。例えば1sで設定するとトリガーに設定されたイベントが発火するとその1秒後に遷移が開始されます。
遷移先画面を設定する
Transitionを選ぶと設定モーダルが表示されます。任意の画面を選ぶ場合は TargetのChooses...をクリックして画面名を選択します。
今回はEventsへ遷移させたいので Events を選択します。ちなみに、 Back to Previous にすると、どこからか遷移してきた場合にその前の画面に戻ります。
遷移アニメーションを設定する
遷移アニメーションAnimateは次の種類があります。
実際の挙動は次のプレビューからも確認できます。
Instant
アニメーションなしで遷移
Push
上下左右で遷移先画面が遷移元画面を押し出す
Modal
遷移元画面上に薄いレイヤーとコンテンツを被せて表示
Overlay
ドロワーなど上下左右から遷移元画面へ被せるアニメーション
Fade
遷移元画面へ移動なしでフェードインで被せる（モーダルに近い）
Flip
遷移元画面と遷移先画面が裏返るアニメーション
Magic については少し特殊で画面遷移というよりは画面中のデザインオブジェクトのアニメーションに使うので一旦説明は省きます。また別記事で扱うかもですが、気になる方は公式の説明をどうぞ。
出来上がり
トリガークリック + Pushで「紹介」画面と「イベント」画面を行き来できるようにしました。
というわけで、次回はスクロールの話を書こうと思います。
Discussion