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

JavaScript | jQuery

初めての自作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の最下部に追加されます。)

仕組み

ものすごくシンプルに、setIntervalで連番の数値を書き換えてアニメーションさせる仕組みです。
プリロードをtrueにすると、の一つ上にdivが生成されて、そこに画像を読み込まれます。
これをやっておかないと結構重くなると思います。

PNGを軽くするには

AfterEffectsなどで書き出したPNGシーケンスは、そのままだとwebでは重いです。

ので圧縮しましょう。
複数のPNGを一括で圧縮できるソフトで、Mac、Winどちらでも使える以下がオススメです。

このソフトを使うと一括で圧縮できて70%くらい軽くなります。

質問やご指摘など気軽にどうぞ

コメントを投稿する

CAPTCHA