ITエンジニア/デザイナ向けにオープンソースを毎日紹介

SVGの良いところはベクターベースのデータである点と、内容がXMLなのでプログラマブルに操作可能ということです。バイナリデータと異なり、一部だけを描画したり色を変えると言ったことも簡単にできます。

そこで使ってみたいのがzPath.jsです。SVGを読み込んでアニメーションしながら描画してくれます。

zPath.jsの使い方

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

描き方も変更できます。

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

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

zPath.js Demo

Zet-Tools/zPath.js: A jquery plugin that will animate/draw SVG

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2