PNG連番を再生するjQueryプラグイン jquery.pnganimation.js

初めての自作jQueryプラグインです。canimate.jsのサイトが死んでたので、代用になればと。
以下リンクからダウンロードできます。(右クリックで保存がいいと思います。)

jquery.pnganimation.js

今回自作したプラグイン、機能はかなりシンプルで
・jQueryでPNG連番の再生
・ループのONOFF
・プリロードのONOFF
のみ可能です。

スクロール範囲に入ると発動させられるwaypoint.jsなんかと併用するといい感じにリッチなサイトを作れるんじゃないでしょうか。

まあでもPNG連番なんでどうしても重いです。
それにAfterEffectsとか使わないと中々PNG連番なんて作る機会がないですし。
GIFだとエッジが汚いし、昔のIEなんて知ったこっちゃねえし、多少重くても全然いいっす
て人だけお使いください。

使い方

PNG連番は必ず4桁にしておいてください(example_0000.pngとか)
んでまずは基本ですがjquery本体とこのプラグインを読み込みます。
次にhtml内にimgタグでpngの1フレーム目を書いて、任意のIDをつけてください

<img src="img/animations/aniamtion_0000.png" id="id">

次にセレクタでこのimgタグのIDを指定し、以下のオプションを指定します。
loopとpreload以外は必ず指定してください。

<script>
　$('#id').pngAnimation({
　　prefix : 'animation_',
　　filepath : 'img/animations/',
   filetype : 'png',
　　fps : '24',
　　totalFrames : '100',
　　loop : true,
　　preload  : true
　});
</script>

prefix — 連番のxxxx0000.pngのxxxxの部分を入れてください。
filepath — 連番を入れたフォルダまでのパスを入れてください。
filetype — 初期設定でpngにしてますが、jpgとかgifでも大丈夫だと思います。
fps — 連番のフレームレートを入れてください
totalFrames — pngの総枚数を入れください
loop — 初期設定ではtrueになってますfalseにすると一度再生して止まります。
preload — 最初に画像読み込んでおくかどうかの設定。初期設定でtrueにしてるのでそのままでいい気がします。(bodyの最下部に追加されます。)