SVGアニメーションでページに動きをつける

最近のWebサイトにはいろいろなアニメーションが入っていたりします。

読み込みの待ち時間に出てくるローディング画面や、ボタンにポインターを合わせると形状が変わったり、画像をふわっと表示したりと、よりWebページを楽しく閲覧できるようになっています。

適度なアニメーションは、UX(ユーザー体験)向上にも繋がりますが、必要ではない要素などに多用すると、かえってコンテンツの内容が入ってこなかったりなど、注意も必要です。
訴求のポイントや、操作や読み込みに関する箇所に使うとよいかもしれません。

今回はSVGでのアニメーションを試してみたいと思います。

●SVGとは
SVGとは、JPEGや、PNG、GIFなどの画像フォーマットの一種で、拡大してもカクカクとシャギらないベクター画像です。
(このあたりの話はまた次回にでもご紹介します。)

点と点の座標データを持っており、その点を線で結ぶ事で表示されるので、Retinaディスプレイなどの高解像度のモニタで見ても綺麗です。
おおよそ単純な作りのアイコンやロゴなどに向いています。

いろいろ試してみたいと思います。

■線で描くストロークアニメーション

svgアニメーション1

svgアニメーション2

svgアニメーション3

ブラウザで拡大(ctrl + +)してみると、分かるのですが、通常の画像みたいにカクカクしたりしません。
スマートフォンやPCなど、端末が変わっても、綺麗に表示されます。

■回転系アニメーション

ロゴ

ロゴ

■移動 + フェードアニメーション

ロゴ

ロゴ

■拡大縮小 + フェードアニメーション

ロゴ

ロゴ

アニメーションが発動するタイミングも、ページの読み込み時、スクロール表示時、クリック時、ポインターをあわせた時など設定する事が可能です。

効果的に適度なアニメーションを施し、Webサイトの表現力を広げていきましょう。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

何でもお気軽にお問い合せください。

お問い合せはこちら