crossline

▼SVGでアニメーション

font-size:12px;line-height: 150%;

 

 

 

 

 

 

今日は、今取りかかり始めたWEBサイト制作について下準備をしている過程の中で、

練習で仮に作ってみたいのものがあるので挑戦してみました。

 

 

 

 

デザインの中で、文字をアニメーションで書いているようにするものを取り入れたくて、しらべてみたところ、SVGで書き出した画像を使用していることがわかりました。

 

使用上の注意点として、

SVG自体はIE9以上に対応しているが、IE8,9には対応していないとのことです。

 

 

 

参考Lazy Line Painter

  :ASCII.jp:HTML5で注目!インラインSVGの使い方 (1/5)|古籏一浩のJavaScriptラボ

  :SVGのアニメーション | mkasumi.com

  :How SVG Line Animation Works | CSS-Tricks

 

 

 

 

 

▼では、そもそもSVGとは何なのか。

SVGとは、Scalable Vector Graphicsの略で名前の通り、ベクター形式(点と点で結ばれた線で表す図形を表す方法illustrator形式)の画像フォーマット。

 

Photoshopはピクセル形式(Dots,点で構成されている)。

 

▼良い点、悪い点

 

良い点:変形に強い

※少ないデータ量で、回転縮小しても、最適な状態で画像が表示されます。ピクセル形式で拡大すると一つのピクセルが大きくなるので全体がぼやけたり汚くなりますが、SVGベクター形式なので解像度を意識しなくていいし、(プリントアウトしても!)キレイに表示されます!!

 

※面積が大きいほどビットマップより少ないデータですむ

巨大な四角形を描画する場合でもベクター形式なら(x1,y1)-(x2,y2)の4つの座標点のデータで済

 

 

悪い点:ちょっと書き出すのはめんどくさい

SVGXML形式の一種なので、テキストエディタで作成はできますが、手作業で書くのは少しめんどくさいし難しい...なので、イラストレータなどを使って作成しちゃいましょう。(CS4生成されるデータが違うので、CS5がインラインSVGに適しています。)

 

参考: 機能 | Inkscape

    Lazy Line Painter

 

 

 

 

 

▼実際にSVGを使ってアニメーション

 

HTML文書内に書く方法もあるのですが、今回はillustoratorを使っていきたいと思います。

 

 

今回は私の名前をもとにアートボードにあわせて、SVGで保存。

f:id:ishuko:20140629165451p:plain

 

f:id:ishuko:20140629165533p:plain

 

 

SVGコードを表示で、コードをコピーし、DOCTYPE宣言XML宣言を削除します。

 

残った<svg>~</svg>を新しく作成したHTML内にペーストします。

 

 

CSSでアニメーション

使うプロパティ

  • strok・・・・・・・・・・線の色を指定する
  • stroke-width・・・・・・・線の太さを指定する
  • stroke-dasharray・・・・・線の間隔を指定する
  • stroke-dashoffset・・・・・線の位置を指定する
  • animation・・・・・・・・・アニメーションさせる要素、スピード、タイミング             をしていする。

 

▼path

<svg>~</svg>を見てわかる通り、shapeは必ずstrokeを持っています。

f:id:ishuko:20140629171928p:plain

 

これをみれば、イラストレータで書いたものがプログラムで書き出すことも可能なことがわかります。

classでpathを指定して、次のように指定します

f:id:ishuko:20140629172651p:plain

f:id:ishuko:20140629172841p:plain

 

もっと長くしてみます。

f:id:ishuko:20140629172940p:plain

f:id:ishuko:20140629172945p:plain

 

 

▼stroke-dashoffset

この値が変わるとアニメーションも変化します(早さ)

stroke-dasharrayが小さくなれば、もっと細かく動きます。(線の間隔)

f:id:ishuko:20140629174333p:plain

f:id:ishuko:20140629174312p:plain

 

※hoverしてアニメーションをさせたいときは、animationプロパティではなく、transitionを使用することも。(スマホからは確認できない可能性あり)

 

f:id:ishuko:20140629175407p:plain

 

最後に、全体図(strokeで色付けて、repsonsiveに)

f:id:ishuko:20140629182033p:plain

 

 

アスペクト比を保つため、t縦×横でパーセンテージ出して入力も忘れずに!

アスペクト比:画像の縦と横の長さの比、ピクセル数の比。一般的には縦:横と表記する)

 

広告を非表示にする