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

f:id:BOEL:20170908145312j:plain

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

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

 

SVGについて

SVGについての詳しい説明や作り方に関しては、こちらの記事をごらんください。

SVGの作り方 | TIPS | BOEL Inc. ボエル

これでもうアイコンがにじまない!SVGのデータ作成で気をつけるポイント | TIPS | BOEL Inc. ボエル

 

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

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

 

描画アニメーション

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

 

CSS3

サンプルコード

#boel{stroke:#000; stroke-width:1px; fill:transparent; stroke-dasharray:1425px; stroke-dashoffset:1425px; animation:anim 2s ease-in 0s forwards;}
@keyframes anim{
0%{stroke-dashoffset:1425px;}
30%{fill:transparent;}
60%{stroke-dashoffset:0;}
100%{stroke-dashoffset:0; fill:#000000;}
}

 

サンプルコード解説

stroke パスの線、また図形を縁取る線の色を指定。

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


stroke-dasharray、stroke-dashoffsetについて

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

 

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

 

XML

サンプルコード

<svg style="stroke-width:0.1rem; stroke:#000000; stroke-dasharray:1425px;">
<!-- ここにpath情報などの要素 -->
<!-- 以下、アニメーション設定の要素 -->
<animate attributeType="css" attributeName="stroke-dashoffset" dur="4s" values="1425px;0px;0px;0px" repeatCount="indefinite" keyTimes="0;0.3;0.6;1" />
<animate attributeType="css" attributeName="fill" dur="4s" values="transparent;transparent;#000000;#000000" repeatCount="indefinite" keyTimes="0;0.15;0.5;1" />
</svg>


サンプルコード解説

<svg> SVGを格納するための要素
style=”stroke-width:0.1rem; stroke:#000000; stroke-dasharray:1425px;” 縁取り線を描画するためのCSS要素。XMLで動かす際にも、ベースとなる線の情報が必要になるため入れておく必要があります。
<animate> SVGに動きをつけるための要素
attributeType アニメーションさせる対象の属性の種類を指定。XMLCSS、autoが指定できる。autoでの優先順位はCSSXML
 上記サンプルでは、変化させたい属性が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

サンプルコード

<svg>
<path>
<animate attributeType="XML" attributeName="d" dur="5s" repeatCount="indefinite"
values="M88,140.9c34.7-6.6,56-41.7,52.7-65.7s-56.7-79-94-48.7s-49.3,69.7-17.7,96.3S63.4,145.6,88,140.9z;
M113.4,135.2c34.7-6.6,33.7-68,30.3-92s-50.7-13-88,17.3s-60.3,42.7-28.7,69.3S88.7,139.9,113.4,135.2z;
M60.6,145.4c34.7-6.6,90.9-63.8,87.5-87.8S118.3-6.8,81,23.5S-5.7,42.5,25.9,69.1S35.9,150.1,60.6,145.4z;
M80.7,109c34.7-6.6,8.1-55.9,4.8-79.9s-16.8-41-54.1-10.7s-20.9,89.8,10.7,116.4S56.1,113.7,80.7,109z;
M121.3,148.5c34.7-6.6,32.4-98.7,29.1-122.7S106,69.7,68.7,100s-74,5.8-42.4,32.4S96.7,153.2,121.3,148.5z;
M95,142.1c34.7-6.6,56.1-62.2,52.8-86.2S82.8-17.3,45.5,13s-7.9,36.2,23.7,62.8S70.4,146.8,95,142.1z;
M88,140.9c34.7-6.6,56-41.7,52.7-65.7s-56.7-79-94-48.7s-49.3,69.7-17.7,96.3S63.4,145.6,88,140.9z" />
</path>
</svg>

 

サンプルコード解説

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

 

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

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

 

動きをつける

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

 

CSS

サンプルコード

#tonton circle{fill:#000000; transform:translate(0,0); animation:animT 2s linear 0s infinite;}
@keyframes animT{
0%{transform:translate(0,0);}
12.5%{transform:translate(80px,130px);}
25%{transform:translate(160px,20px);}
37.5%{transform:translate(240px,130px);}
50%{transform:translate(300px,20px);}
62.5%{transform:translate(240px,130px);}
75%{transform:translate(160px,20px);}
87.5%{transform:translate(80px,130px);}
100%{transform:translate(0,0);}
}

 

XML

サンプルコード

<svg id="tonton2" width="300px" height="150px" viewBox="0 0 300 150" style="enable-background:new 0 0 300 150;" xml:space="preserve">
<circle cx="0" cy="0" r="20">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0;80 130;160 20;240 130;300 20;240 130;160 20;80 130;0 0" keyTimes="0;0.125;0.25;0.375;0.5;0.625;0.75;0.875;1" dur="2s" repeatCount="indefinite" />
</circle>
</svg>

 

サンプルコード解説

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


注意点

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

 

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

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

 

サンプルコード
<svg id="tonton3" width="300px"height="150px" viewBox="0 0 300 150" style="enable-background:new 0 0 300 150;" xml:space="preserve">
<path id="stroke" fill="none" stroke="#dddddd" stroke-width="0.1rem" d="M0,0c0,0,10.2,108,62.7,129.7s111.5-48.1,153.7-84.1c39.9-34,60-21.7,60-2.2c0,28.8-31.1,58.9-97.6,46.7
C113.5,78.1,0,0,0,0z"/>
<circle cx="0" cy="0" r="20">
<animateMotion dur="3s" calcMode="linear" repeatCount="indefinite">
<mpath xlink:href="#stroke" />
</animateMotion>
</circle>
</svg>

 

サンプルコード解説

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

 

まとめ

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

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