zPath.js - SVGをアニメーションしながら描画 // MOONGIFT Archived

SVGの良いところはベクターベースのデータである点と、内容がXMLなのでプログラマブルに操作可能ということです。バイナリデータと異なり、一部だけを描画したり色を変えると言ったことも簡単にできます。そこで使ってみたいのがzPath.jsです。SVGを読み込んでアニメーションしながら描画してくれます。

zPath.jsの使い方

一例。速度も制御できます。

描き方も変更できます。

zPath.jsを使えばロゴなどもアニメーションするように指定できます。これまでは動画やアニメーションGIFを使うしかありませんでしたが、zPath.jsを使うことでSVGを使う利点が生まれそうです。

zPath.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。