TIPS

2017.09.07
vol.76

WEB

線や塗りなど描画が美しいSVGアニメーションの作り方

vol.76 線や塗りなど描画が美しいSVGアニメーションの作り方

ロゴやアイコンなどをWebサイトで拡大・縮小しても劣化させたくない場合に使用されるSVG画像。
SVGには、gifのように画像をアニメーションさせることができます。
gifや動画などと違い、ベクター形式であるSVG特有の滑らかな動きを表現できます。

今回は、XML形式とCSS3でアニメーションをつけて
ロゴやアイコン、図形などをリッチに見せる方法をサンプル解説とともにご紹介します。

SVGについて

SVGについての詳しい説明や作り方に関しては、こちらの記事をごらんください。
vol.34 SVGの作り方
vol.64 SVGのデータ作成で気をつけるポイント

SVGはベクター形式の画像。
jpgやpngなどの形式の画像と違いパスデータで構成されており、
そのパスの情報をXML形式で持っているためコード上での編集が可能です。

そのため、XML形式のアニメーションタグを使ってアニメーションをつけたり、
パスごとにクラス名をつけて細かくCSS3のアニメーションでSVG画像に動きをつけることができます。

描画アニメーション

ペンで描画するような線の動きと、塗りを変化させる動きを組み合わせたSVGアニメーションです。

CSS3

XML

CSS3

サンプルコード

サンプルコード解説

strokeパスの線、また図形を縁取る線の色を指定。 fill図形の塗りの色を指定。 stroke-width線の太さを指定。単位はpx、em、remなどが使用可能。 stroke-dasharray線の長さ・線と線の間隔を指定。 stroke-dashoffset線の開始位置を指定。 animationCSSアニメーションのプロパティ

stroke-dasharray、
stroke-dashoffsetについて

stroke-dasharray図形の線を破線形にし、一区切りの線の長さ・線と線の間隔を指定します。 stroke-dashoffset線の開始位置を指定します。
数値を入れると、もとのパス情報の位置から指定した数値分、位置が移動し、
もとのパスの位置からズレた分は非表示になります。

stroke-dasharrayで線の長さを、図形の縁に隙間がないよう全体を覆う長さにし、
stroke-dashoffsetで同じ数値を入れることで、図形を縁取っている線の長さ分位置が移動して
図形が非表示のように見える状態になります。

XML

サンプルコード

サンプルコード解説

<svg>SVGを格納するための要素 style=”stroke-width:0.1rem; stroke:#000000; stroke-dasharray:1425px;”縁取り線を描画するためのCSS要素。
XMLで動かす際にも、ベースとなる線の情報が必要になるため入れておく必要があります。
<animate>SVGに動きをつけるための要素 attributeTypeアニメーションさせる対象の属性の種類を指定。XMLかCSS、autoが指定できる。
autoでの優先順位はCSS→XML
上記サンプルでは、変化させたい属性がCSSプロパティのためCSSを指定しています。
attributeNameアニメーションさせる対象の属性を指定。x・yなど座標や、width・heightなどが指定できる。
上記サンプルでは、線の位置を指定するstroke-dashoffsetと、図の塗りを指定するfillをアニメーション対象に指定しています。
durアニメーション1回の時間を指定 valuesアニメーションの属性値を指定。セミコロンで区切ることができます。 keyTimesアニメーションを開始するタイミングを指定。0(開始)〜1(終了)で指定する。
keyTimesで指定した時間区分はvaluesと連動するため、valuesの属性値の数と、keyTimesの時間区分を同じ回数にする必要がある。
repeatCountアニメーションの繰り返し回数を指定。
 繰り返しの回数(数値)、もしくはindefinite(ずっとループ)が指定できる。

変形

図形のパス情報を変化させ、変形させるアニメーション。
パス情報はCSSで変化をつけることができないので、XMLでの方法のみを紹介します。

XML

サンプルコード

サンプルコード解説

<path>図形のパスデータを格納するための要素 attributeNameアニメーションさせる対象の属性を指定。
サンプルでは d、パス情報をアニメーション対象にしています。

変形アニメーションの注意点

illustratorなどで図形を作成する際、
変形元の図形から、変形した図形を作るときにパスの数を変えてしまうと滑らかな動きが実装できません。

動きをつける

要素に回転や拡大縮小をさせたり、位置を移動させるなどのアニメーションです。

CSS3

XML

CSS

サンプルコード

XML

サンプルコード

サンプルコード解説

circle円形パスの要素 animateTransformanimate要素では使用できない、CSS3のtransform属性を使用するための要素。
基本的な使い方はanimateと同じ

注意点

animateタグは、動かしたい要素内に記述する必要があります。
svg画像全体を動かしたい場合は、<svg></svg>の間に記述しますが、
上記サンプルではsvg内のcircle要素のみを動かしたいので
<circle></circle>の間にanimateタグを記述しています。

パスに沿ってアニメーションする

上記、「動きをつける」で紹介したのは基本的にCSSを使った動かし方ですが、
パスの線に沿ってアニメーションすることもできます。

XML

サンプルコード

サンプルコード解説

<path id=”stroke”…>動きの軌道となるパスの線要素。
mpath要素でid参照をするため、idの設定が必須です。
animateMotionパスデータでのアニメーション処理を行うための要素 mpathanimateMotionの子要素。
xlink:href属性で軌道となる線要素のidを指定し、参照します。

まとめ

いかがでしたでしょうか。
今回は、SVGアニメーションの基本的な要素やCSS、XML上での動かし方を紹介しました。
ちょっとした動きや、アイコンや文字の簡単なアニメーションの実装なら
あまり難しいコーディングが必要ではないと感じていただけたのではないかと思います。

もっと複雑なパスの図版などをアニメーションにするにはCSSやXMLでは難しいですが
簡単にSVGにアニメーションをつけることができるJavaScriptのプラグインも多くあるので、
うまく組み合わせてSVGを効率的に使えるようになると良いと思います。

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2017
November (
October (
September (
August (
July (
June (
May (
April (
February (
January (
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。