別名 Morphing Blob, Animated Blob, Blob / Morphing Loader, Gooey loader, Morph loader
有機的なブロブが輪郭を絶えず変化させ続けます。
使いどころ
背景、アバター、ボタン
[適用する場所]にブロブモーフ(Blob Morph)のループアニメーションを追加してください。モーフィングブロブ(morphing blob)、アニメーテッドブロブ(animated blob)とも呼ばれます。
有機的なブロブがゆっくり回りながら輪郭を絶えず変化させ、角のない滑らかで柔らかな動きにしてください。
形が飛ばないようにループの継ぎ目をなくし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。別名 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
ぼかしとコントラストのフィルターで、近くの形同士が液体のしずくのように溶け合います。
使いどころ
メニュー、カーソル、ページネーション
[適用する場所]にグーイーエフェクト(Gooey Effect)を追加してください。グーエフェクト(goo effect)、メタボール(metaballs)とも呼ばれます。
ポインターを乗せると小さなしずくが本体から液体のように伸びてから離れ、ポインターが外れると流れるように戻って滑らかに溶け合うようにしてください。
ぼかしとコントラストのフィルターはページ全体ではなく小さな形のグループだけにかけ、キーボードフォーカスやタップでも同じ効果を出してください。別名 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
ハンバーガーメニューなどのアイコンが、バーの回転と移動によって別のアイコン(X)に変わります。
使いどころ
メニューの開閉ボタン
[適用する場所]にアイコンモーフ(Icon Morph)を追加してください。ハンバーガーからX(hamburger to X)、メニューアイコンモーフ(menu icon morph)とも呼ばれます。
押すたびに上下のバーがまず中央に寄ってから回転してXになり、中央のバーはフェードアウトし、もう一度押すと元に戻るようにしてください。素早く切れのある動きにしてください。
実際のトグルボタンにしてアクセシブルなラベルと展開状態も一緒に切り替え、周りがずれないようにアイコンのサイズは固定してください。別名 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
破線オフセットをアニメーションさせ、SVGの線がパスに沿って描かれていくように見せます。
使いどころ
アイコン、ロゴ、イラスト
[適用する場所]にラインドローイング(Line Drawing)アニメーションを追加してください。パスドローイング(path drawing)、セルフドローイングSVG(self-drawing SVG)とも呼ばれます。
各線がパスに沿って始点から終点まで滑らかに自分で描かれていくように見せ、チェックマークのような2本目の線は1本目のすぐ後に続けてください。
ループさせず画面に入ったときに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は描き終わった線を表示してください。別名 Animate Along Path, Offset Path Animation
要素が独自の曲線パスに沿って移動し、パスに合わせて向きを変えることもできます。
使いどころ
ルート上を進む飛行機や点、装飾的な移動要素
[適用する場所]にモーションパス(Motion Path)アニメーションを追加してください。アニメイトアロングパス(animate along path)とも呼ばれます。
小さな要素が独自の曲線ルートに沿ってゆっくり一定のペースで進み、進行方向を向くように回転させてください。
ループが飛ばずに繰り返されるよう閉じたルートにし、ルートは固定サイズのままにせずコンテナに合わせて拡大縮小させてください。別名 Orbit Animation, Orbit, Orbiting icons
小さな円やアイコンが円軌道を描いて中心の周りを回ります。
使いどころ
連携サービスの図
[適用する場所]にオービティングサークル(Orbiting Circles)を追加してください。オービットアニメーション(orbit animation)、オービティングアイコン(orbiting icons)とも呼ばれます。
小さな円が中央の要素の周りを円形のリング上でゆっくり一定の速さで回り、外側のリングは逆向きにもっとゆっくり回るようにしてください。
ループは継ぎ目なく、回る項目は常に正立させ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。別名 Path Morphing, SVG Morph, MorphSVG, Shape Tweening
あるベクター図形が別の図形へ滑らかに変形します。
使いどころ
アイコンの状態切り替え、ヒーローグラフィック
[適用する場所]にシェイプモーフ(Shape Morph)を追加してください。パスモーフィング(path morphing)、SVGモーフ(SVG morph)とも呼ばれます。
五角形がくびれて星になるように、ある図形が別の図形へ滑らかに変わり、各点が均一で落ち着いたペースで所定の位置へ移動するようにしてください。
ちらつきのないきれいな変形になるよう両方の図形の点の数と対応をそろえ、ループではなく状態が変わるたびに一度だけ再生してください。別名 feTurbulence Distortion, Displacement Map Effect
SVGフィルターがアニメーションするノイズでテキストや図形を歪ませます。
使いどころ
液体や波紋のホバー効果
[適用する場所]にSVGディスプレイスメントディストーション(SVG Displacement Distortion)のホバー効果を追加してください。ディスプレイスメントマップエフェクト(displacement map effect)とも呼ばれます。
ポインターを乗せている間、テキストや図形が揺れる水越しに見るように波打ってゆらめき、効果はふわっと現れ、ポインターが外れるとくっきりした状態に戻るようにしてください。
静止時に負荷がかからないよう歪みフィルターは効果が有効な間だけ適用し、キーボードフォーカスでも同じ効果を出してください。別名 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
マスクの形がワイプしたりポインターを追ったりして、下にあるコンテンツを見せます。
使いどころ
画像やコンテンツの表示演出
[適用する場所]にSVGマスクリビール(SVG Mask Reveal)のホバー効果を追加してください。クリップパスリビール(clip-path reveal)、スポットライトマスク(spotlight mask)とも呼ばれます。
ポインターを乗せている間は円形のマスクが中央から広がって下のコンテンツを見せ、ポインターが外れると再び閉じるようにしてください。滑らかで、やや素早く。
何もずれないよう2つのレイヤーをまったく同じサイズにし、キーボードフォーカスやタップでも同じ表示をしてください。