▼SVGでアニメーション
font-size:12px;line-height: 150%;
今日は、今取りかかり始めたWEBサイト制作について下準備をしている過程の中で、
練習で仮に作ってみたいのものがあるので挑戦してみました。
デザインの中で、文字をアニメーションで書いているようにするものを取り入れたくて、しらべてみたところ、SVGで書き出した画像を使用していることがわかりました。
使用上の注意点として、
SVG自体はIE9以上に対応しているが、IE8,9には対応していないとのことです。
：ASCII.jp：HTML5で注目！インラインSVGの使い方 (1/5)｜古籏一浩のJavaScriptラボ
：How SVG Line Animation Works | CSS-Tricks
▼では、そもそもSVGとは何なのか。
SVGとは、Scalable Vector Graphicsの略で名前の通り、ベクター形式（点と点で結ばれた線で表す図形を表す方法※illustrator形式）の画像フォーマット。
※Photoshopはピクセル形式（Dots,点で構成されている）。
▼良い点、悪い点
良い点：変形に強い
※少ないデータ量で、回転縮小しても、最適な状態で画像が表示されます。ピクセル形式で拡大すると一つのピクセルが大きくなるので全体がぼやけたり汚くなりますが、SVGはベクター形式なので解像度を意識しなくていいし、（プリントアウトしても！）キレイに表示されます！！
※面積が大きいほどビットマップより少ないデータですむ
巨大な四角形を描画する場合でもベクター形式なら(x1,y1)-(x2,y2)の4つの座標点のデータで済む
悪い点：ちょっと書き出すのはめんどくさい
SVGはXML形式の一種なので、テキストエディタで作成はできますが、手作業で書くのは少しめんどくさいし難しい．．．なので、イラストレータなどを使って作成しちゃいましょう。（CS4生成されるデータが違うので、CS5がインラインSVGに適しています。）
参考： 機能 | Inkscape
▼実際にSVGを使ってアニメーション
HTML文書内に書く方法もあるのですが、今回はillustoratorを使っていきたいと思います。
今回は私の名前をもとにアートボードにあわせて、SVGで保存。
SVGコードを表示で、コードをコピーし、DOCTYPE宣言、XML宣言を削除します。
残った<svg>~</svg>を新しく作成したHTML内にペーストします。
▼CSSでアニメーション
使うプロパティ
- strok・・・・・・・・・・線の色を指定する
- stroke-width・・・・・・・線の太さを指定する
- stroke-dasharray・・・・・線の間隔を指定する
- stroke-dashoffset・・・・・線の位置を指定する
- animation・・・・・・・・・アニメーションさせる要素、スピード、タイミング をしていする。
▼path
<svg>~</svg>を見てわかる通り、shapeは必ずstrokeを持っています。
これをみれば、イラストレータで書いたものがプログラムで書き出すことも可能なことがわかります。
classでpathを指定して、次のように指定します
もっと長くしてみます。
▼stroke-dashoffset
この値が変わるとアニメーションも変化します（早さ）
stroke-dasharrayが小さくなれば、もっと細かく動きます。（線の間隔）
※hoverしてアニメーションをさせたいときは、animationプロパティではなく、transitionを使用することも。（スマホからは確認できない可能性あり）
最後に、全体図（strokeで色付けて、repsonsiveに）
アスペクト比を保つため、t縦×横でパーセンテージ出して入力も忘れずに！
（アスペクト比：画像の縦と横の長さの比、ピクセル数の比。一般的には縦：横と表記する）
