English
简体中文
Español
Português (Brasil)
Deutsch
Français
한국어
Čeština
Tiếng Việt
Bahasa Indonesia
Türkçe
Русский21 個のアイコン · interaction="hover"
ホバーで動くアニメーションアイコン
ポインターが乗ると順方向に再生し、離れると逆再生するアイコンです。動きがカーソルに追従し、途中で止まったままになることがありません。ゴミ箱のふたが持ち上がる、設定の歯車が回る、フォルダが開くといった具合に、クリックした先を予告するナビゲーション項目やボタンに向いています。
「ホバー」のアイコン一覧
動作
mouseenter で順方向に、mouseleave で逆方向に再生します。
モーション軽減が有効な場合、ホバーしてもアニメーションは再生されません。タッチスクリーンでのタップではホバーアニメーションは始まりません。アイコンがフォーカス可能な要素の中にあれば、キーボードフォーカスでも再生されます。これらはすべて React コンポーネントが処理するので、アイコンを選ぶだけで済みます。
使いどころ
- サイドバーやナビゲーションメニューの項目
- クリック前にふたが持ち上がる削除ボタン
- 設定やプロフィールへのリンク
- ズームイン・ズームアウトの操作
- フッターの SNS リンク
カテゴリ別
React で使う
ここに並ぶアイコンは、デフォルトでこのインタラクションで再生されます。ほかのアイコンでも interaction prop を渡せば同じ動きにできます。
import UseAnimations from 'react-useanimations';
import bookmark from 'react-useanimations/lib/bookmark';
// Bookmark の本来のインタラクションは 'click-toggle'
<UseAnimations animation={bookmark} interaction="hover" size={32} />render prop を使ってアイコンをリンクやボタンで包むと、要素がキーボードフォーカスを受けたときにもアニメーションが再生され、タッチスクリーンでのタップでは再生されなくなります。
import archive from 'react-useanimations/lib/archive';
<UseAnimations
animation={archive}
render={(eventProps, animationProps) => (
<a href="/archive" {...eventProps}>
<span {...animationProps} /> アーカイブ
</a>
)}
/>すべての props はドキュメントにまとめています。React 以外では、アイコンは Lottie JSON ファイルです。lottie-web でインタラクションを再現する方法は Lottie アイコンを参照してください。
よくある質問
「ホバー」のインタラクションを使うアイコンは？
21 個あります。Calendar、Edit、Explore、Folder、Home、Info、Settings、Trash、Trash V2、Zoom In、Zoom Out、Archive、Copy、Mail、Share ほか 6 個です。ホバーで動くアイコンは、ナビゲーション項目、削除ボタン、設定、ズーム操作、SNS リンクによく使われます。
ユーザーがモーション軽減を設定している場合はどうなりますか？
モーション軽減が有効な場合、ホバーしてもアニメーションは再生されません。React コンポーネントが prefers-reduced-motion を読み取り、設定が変わればそれに追従するので、そのためのコードを書く必要はありません。
アイコンのインタラクションを変えるには？
どのアイコンも、デザインされたときのインタラクションで再生されます。interaction="hover" を渡せばほかのアイコンにもこの動きを付けられ、別の値（'loop'、'click-toggle'、'click-replay'、'hover'、'hover-loop'、'hover-replay'）を渡せば別の動きに変えられます。再生は autoplay、loop、speed の props で調整できます。