CLOSE OPEN

ENT TECH LAB.

TAGSTAGS

jQueryでフレームアニメーションを作る(ParaPara.js)


ParaPara.jsを使ってFlashにも負けないjQueryでフレームアニメーションを作ってみました。 メモリには優しくないですが、これで大抵のアニメーション表現が可能です。

WEBサイトでアニメーション

最近はcssアニメーションや、jQueryの.animate()を効果的に使ったサイトが増えてきました。しかし、もうちょっと踏み込んだ表現はFlashに追いつけていないようにも思います。
今回は、画像を一枚ずつ差し替えてアニメーションさせるParaPara.jsを作ってみました。メモリには優しくないですが、これで大抵のアニメーション表現が可能です。

ParaPara.js
※GitHub
※URL変わりました

ParaPara.js

ParaPara.jsはimg要素を素早く差し替えることでアニメーションさせるクラスです(要jQuery1.7以上)。
背景画像をcssのbackground-positionで切り替えるものは見つかったのですが、img要素を切り替えるものは軽くggったところ、見つからなかったので作ってみました。
※一部のブラウザでは表示に不具合があるので注意してください
サンプルを見るにはクリック!
スラップスティックなLab.ロゴが見えましたか?

使い方

jqueryとparapara.jsを読み込んだら、まずアニメーションデータを作成します。これはParaParaDataクラスを使います。※img0001〜img0003というクラス名のimg要素があるとします

new ParaParaData()でアニメデータを作ったら、dataプロパティ(連想配列)にimg要素を入れていきます。連想配列名は4桁の連番を0000から入れていきます。preload.jsなんかを使ってもいいですね。

アニメデータが出来たら、パラパラアニメを作ります

ParaParaコンストラクタの第一引数はアニメデータ、第二引数はimg要素を入れるコンテナ(div等)です。
あとはplayメソッドで再生です。

簡単ですね!

主なメソッドやプロパティは以下のようなものです。

また、アニメデータにもメソッドがあります

アニメデータの破棄にはdeleteステートメントを使っていますが、ChromeではGCの効果がみられました。
でも、clone()のしすぎは禁物です。

詳しくはGithubのサンプルをご覧ください。
いずれはスプライトシートにも対応させたいですね。フィードバックもいただけたら嬉しいです!

関連記事
BACK TO TOP