WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

SVGを使ったアニメーション

carlphilippebrenner.com

tympanus.net

http://gardenstudio.com.br/gardenstudio.com.br

jakearchibald.com

SVGとは?

SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。

SVGに対応しているブラウザー


blog.codecamp.jp




今回の授業ではSVGを単独で使用するだけでなく、HTMLファイルの中に記述し、css3アニメーションを併用します。
こうする事でブラウザー上で色々な表現方法が可能になります。
※ただしIEOperaは、全てのSVG要素でCSSアニメーションを受け入れないという問題があります。


変化させる方法は主に以下の3つがあります。

CSSプロパティ(transitionやanimation)を使う→簡単だけどIE未対応
setTimeout()を使う→IEも動くけど面倒
JavaScriptライブラリを使う→簡単&IEでも動くけどサイズが膨大
それぞれ、長所・短所があるので、状況に応じて使い分けると良いかと思います(ちなみにjQuerySVGの要素を扱えないので使えません)。


SVGのパスは、以下のようなプロパティを使って、スタイルを指定出来ます。

stroke:線の色
stroke-width:線の太さ
fill:塗りつぶしの色
stroke-dasharray:破線の間隔
stroke-dashoffset:破線の開始位置


今回は破線のプロパティである、stroke-dasharraystroke-dashoffsetを使い、線を引くアニメーションを作成します。





また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。
none(初期値)

キーフレームで指定されたスタイルは、アニメーションの前後には適用されません。

forwards

アニメーションの実行後にキーフレームの最後の指定が適用されます。

backwards

アニメーションの実行後、即座にキーフレームの最初のスタイル指定を適用します。

both

forwards と backwards の両方が適用されます。アニメーション実行前には backwards が、実行後には forwards があると考えると分かりやすいと思います。



<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>丸を別々に動かす</title>
<style>
#box {
  width:800px;
  margin:50px auto;
}
.st0{
  fill:none;
  stroke:#E72C28;
  stroke-width:10;
  stroke-miterlimit:10;
  stroke-dasharray:1000px;/*破線の間隔*/
  stroke-dashoffset:1000px;
  animation:circle-line0 1s linear forwards;
}
@keyframes circle-line0 {
  0%{stroke-dashoffset:1000px;}
  100%{stroke-dashoffset:0;}
}
.st1{
  fill:none;
  stroke:#3669B3;
  stroke-width:10;
  stroke-miterlimit:10;
  stroke-dasharray:1000px;/*破線の間隔*/
  stroke-dashoffset:1000px;
  animation:circle-line1 1s 0.7s  linear forwards;
}
@keyframes circle-line1 {
  0%{stroke-dashoffset:1000px;}
  100%{stroke-dashoffset:0;}
}
.st2{
  fill:none;
  stroke:#7DBE31;
  stroke-width:10;
  stroke-miterlimit:10;
  stroke-dasharray:1000px;/*破線の間隔*/
  stroke-dashoffset:1000px;
  animation:circle-line2 1s 1.4s linear forwards;
}
@keyframes circle-line2 {
  0%{stroke-dashoffset:1000px;}
  100%{stroke-dashoffset:0;}
}
</style>
</head>

<body>
<div id="box">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 459.8 200" style="enable-background:new 0 0 459.8 200;" xml:space="preserve">

<circle id="XMLID_1_" class="st0" cx="100" cy="100" r="95"/>
<circle id="XMLID_3_" class="st1" cx="228" cy="100" r="95"/>
<circle id="XMLID_4_" class="st2" cx="359.8" cy="100" r="95"/>
</svg>
</div>
</body>
</html>