みなさん、お疲れ様です。

 

今回はSVGアニメーションに挑戦しました。→DEMO

 

存在自体は知ってたのですが、使いどころがわからずほったらかしになっていました。

で、なんとなく上のDEMOを作っていたら、知人が「サイトの初めに出したら面白そう」と言ってくれたので、それをヒントに実装しました。もしよければ後でポートフォリオサイトのほうに行ってみてください。ページ上部のロゴからリンクしてます。

 

では、使い方です。

今回はこちらのサイトを参考にさせていただきました。サイトが詳しいのでここでは簡単に説明させていただきます。

http://ascii.jp/elem/000/000/901/901319/

 

①まず、Illustratorでイラストを描きます。アンカーポイントは少ないほうがよさそうです。

 

②イラストをsvg形式で保存します。このときレイヤーの名前は半角英数にしておきましょう。

 

③svgの画像をDreamweaverなどのテキストエディタで開きます。すると以下のようなコードが出ます（見えないと思いますが、雰囲気だけ）。

 

④このコードの<svg>～</svg>をコピーしてHTMLの埋め込みたいところにペーストします。このときブロック要素で囲んでおいて、その要素の幅で画像の大きさを操作します。

 

    ⑤CSSでアニメーションの動きを決めます。 stroke・・・線の色 fill・・・塗りつぶしの色 stroke-width・・・線の幅 stroke-dasharray・・・破線の間隔 stroke-dashoffset・・・破線の開始位置 仕組みとしては破線の間隔を見えなくなるくらい長くして、破線の開始位置をすごく大きいところから小さくしていくことで、描画するような動きになるということだそうです。    

 

一応以上で完成です。まだやり始めでわかってないこともたくさんあるので、またいろいろ試してみて載せたいと思います。