2017.9.7
Vol.76
WEB

Vol.76
WEB
2017.9.7

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

ロゴやアイコンなどをWebサイトで拡大・縮小しても劣化させたくない場合に使用されるSVG画像。SVGには、gifのように画像をアニメーションさせることができ、gifに比べて滑らかな動きを表現できます。今回はXML形式とCSS3でアニメーションをつけて、ロゴやアイコン、図形などをリッチに見せる方法をサンプル解説とともにご紹介します。

DEVELOPER

Y.M

SVGについて

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

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

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

描画アニメーション

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

CSS3

XML

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>

サンプルコード解説

<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

サンプルコード

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

動きをつける

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

CSS3

XML

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  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>

サンプルコード解説

circle
円形パスの要素

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

注意点

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

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

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

XML

サンプルコード

<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を指定し、参照します。