ホバー(hover)とは
ホバリングという言葉を聞いたことがある方は多いのではないでしょうか。ヘリコプターやドローンなどで使われることが多い単語で「空中で停止する」という意味があります。
Webにおけるホバーとは、ボタンや画像にマウスを合わせてクリックをしなくてもアニメーションが始まったり変化したりする表現を指します。
ボタンのホバーアニメーションの作成方法
まずはホバー前のボタンデザインを作成しましょう。
右クリックでメニューバーを表示して「コンポーネントにする」からできます。
ショートカットはmacOSでは⌘+K、WindowsはCtrl+Kです。
ボタンを選択した状態で、画面右のメニューバーのコンポーネント欄から初期設定のステートの+をクリック。ホバーステートを選んでください。
上記で記載したホバーステートを選択した状態で、ホバーデザインを作成します。
ボタンを選択した状態で、左上のプロトタイプで画面を切り替え、
右のメニューバーでアニメーション設定をします。
トリガーはホバーを選択。下の画像はアクションは標準設定です。
お好みのアクションに細かく設定できます。
設定ができたらプレビューボタンで動作を確認してみましょう。
プレビューのショートカットはmacOSでは⌘+Enter、WindowsはCtrl+Enterです。
まとめ
このアニメーションを応用すると、グローバルメニューのプルダウンやSPのハンバーガーメニューの開閉などもプレビュー表示で見ることができます。
XDは簡単にアニメーションが作れるので、ぜひ試してみてください!