🦄

Framer + RemixでWebサイトをつくる #7 - 画面を増やして遷移してみる

2021/12/20に公開約3,500字

引き続き開催しているもくもく会「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を選ぶと設定モーダルが表示されます。任意の画面を選ぶ場合は TargetChooses...をクリックして画面名を選択します。

今回はEventsへ遷移させたいので Events を選択します。ちなみに、 Back to Previous にすると、どこからか遷移してきた場合にその前の画面に戻ります。

遷移アニメーションを設定する

遷移アニメーションAnimateは次の種類があります。

実際の挙動は次のプレビューからも確認できます。

https://framer.com/share/routings--xskwbqeDUcPCgKVUeyEw/Oy6DDsJOz

Instant

アニメーションなしで遷移

Push

上下左右で遷移先画面が遷移元画面を押し出す

遷移元画面上に薄いレイヤーとコンテンツを被せて表示

Overlay

ドロワーなど上下左右から遷移元画面へ被せるアニメーション

Fade

遷移元画面へ移動なしでフェードインで被せる(モーダルに近い)

Flip

遷移元画面と遷移先画面が裏返るアニメーション

Magic については少し特殊で画面遷移というよりは画面中のデザインオブジェクトのアニメーションに使うので一旦説明は省きます。また別記事で扱うかもですが、気になる方は公式の説明をどうぞ。

https://www.framer.com/support/using-framer/magic-motion/

出来上がり

トリガークリック + Pushで「紹介」画面と「イベント」画面を行き来できるようにしました。

https://framer.com/share/kamakura-dev-routing--wNee6EG9CZCnoJbohcTO/Ih6d4c8rJ


というわけで、次回はスクロールの話を書こうと思います。


Discussion

ログインするとコメントできます