読者です 読者をやめる 読者になる 読者になる

ayihiscope

主に情報系の話題が好きな大学生の雑記!

Vivus.jsを使ってsvg画像にアニメーションをつける

プログラミング JavaScript

↓ここに画像あるはず

↑クリックすると動くよ(たぶん)

 

自分のwebページを作る時に,友人のHPを参考にして,僕もsvg形式の画像を動かしてみようと思いました.

 

今回使ったライブラリは

vivus.js - svg animation

というやつ

 

たぶんアニメーションに関してはVelocity.jsの方が有名だし機能も多いと思うのだけど,僕がJSにあまり詳しくないのでなるべくシンプルなライブラリを選んだ.

 

じゃぁ,やってみよう

 

手順1:svg画像の用意(線のやつ)

このライブラリの注意書きにもあるんだけど,線を使った画像じゃないとダメっぽい.

 

とりあえず,Adobe Illustratorとかincscapeとかでsvgの画像を作ろう!

 

例としてこんな感じの画像を作った

  

f:id:ayihis:20160629231555p:plain

 

これをsvg形式で書き出すとこんな感じになる

 


 

たぶん画像として出ちゃう気がするので,view Rawで中身を見てみてください

 

Illustratorで書き出すと<g>とかでグループ化されてたり<title>とかついたりするけど,その辺は削除しても大丈夫!です!

手順2:Vivus.jsを読み込めるようにしておく

JavaScriptを使う時によくある感じで,スクリプトを落としてきて読み込める感じにしておきます.

ソースはここから落とせます.https://github.com/maxwellito/vivus

手順3:インラインsvgとしてhtmlの中に組み込む

普通にhtmlの中の要素としてsvgを埋め込みます

この時にsvgの中にidとか動作させるスクリプトを埋め込みましょう

こんな感じ


 

そうすると!動く!!


 

以上です.