第4章　インタラクティブアニメーション

第2節　アニメーションを作成する

この項では、ムーブインを行うアニメーションを作成します。

第2項　ムーブインするアニメーション

この項の学習目標

クリックで左から入ってくるようなアニメーションを作成する

（１）素材フォルダ [Figma-04] の中にあるファイル [4-2-2.fig] を開きます。
フレーム [Close] にサイトのトップページが画像として配置されています。また、フレーム［Open］にトップページに重ねて表示されるメニューが画像として配置されています。



（２）フレーム [Close] のハンバーガーアイコン部分に重なるように長方形ツールで長方形を描きます。



（３）描いた長方形の塗りを[―]アイコンをクリックして削除します。



（４）[プロトタイプ] モードに切り替えて、塗りを削除した長方形をレイヤーパネルから選択します。



（５）長方形にカーソルを重ねると、「○」が表示されます。
「ヌードル」をフレーム [open] へドラッグしてリンクをつなぎます。ヌードルのドラッグ先はフレーム「open」内であればどこでもかまいません。矢印の位置も自動で調整されます。



（６）接続すると表示される［インタラクション詳細］を選択し、以下を設定します。
「タップ」
「次に移動」　→　「オーバーレイを開く」に変更、「open」
オーバーレイ
「左上」　→　「中央下」に変更
「外部をクリックしたときに閉じる」にチェックを入れた状態に。
アニメーション
「即時」　→　「ムーブイン」に変更
「ムーブイン」右側の←→↓↑アイコンから「→」をクリック
（表示が消えてしまった場合は「ヌードル」を選択すると [インタラクション詳細] が表示されます。）



（７）設定ができたら [プレゼンテーションを実行] をクリックしてプレビューを表示します。



（８）プレビュー画面右上のハンバーガーアイコンをクリックします。
左からメニューがムーブインするアニメーションすれば成功です。
上手くアニメーションしない場合は手順（４）～（６）の手順をもう一度やり直してみてください。
また、完成ファイルを用意してありますので「4-2-2-comp.fig」を開いて参考にしてください。
時間の余裕がある場合、左から入ってくるアニメーションを他の方向から入るように変更、
イーズアウトを変更、イーズアウトの秒数を変更して動きを確認してみましょう。

スライドインするメニューは作りこまないのか？

今回、スライドインするメニュー、トップページはともに画像を使用しています。トップページ、メニュー部分ともにfigmaで作りこむことも可能ですが、動きの確認だけを行うのであれば画像で代用することもできます。画像部分を編集することはできませんが、扱いが手軽なので、急な依頼変更や打ち合わせなどで使うと便利です。

塗りの無い長方形

ハンバーガーアイコン部分に塗りのない長方形を重ねました。透明なガラスのプレートをハンバーガーアイコン部分に乗せたようなイメージで、タップして影響する範囲を指定するために作成しています。HTMLとCSSを学習済の方は、display属性がblockで、background属性が無い要素などをイメージしていただくとよいでしょう。
実際の制作でも同じように透明のボタンを設置することがあります。また、アプリなどでは、見た目のボタンとは別に、画面のどこを押しても反応するよう、全画面サイズの透明ボタンを設置することがあります。

この項のまとめ

以上でこの項の学習は終了です。
次の項へ進んでください。