Jsアニメーションライブラリ2

MoviePng.jsはパーティクルなどで複数表示を行う場合にも簡単に実装ができます。

複数のアニメーションを生成する方法

html

<body>
<div id="container"></div>
</body>

<body>

</body>

css

.mov{
position: absolute;
}

.mov{

position: absolute;

}

javacript

$(function(){
var animationData={
"fps":30,
"image":["common/image/fire.png"],
"size":[89,115],
"anime":{
"normal": [0, 48],
}
}

var z=0;
// MoviePngを複数表示
for (var i = 0; i < 10; i++) {

// ユニークなidを持ったクラス生成
var uclass = "anm"+uid();

// 親クラスにアニメーション用divを追加
var anm=$("
<div class='mov "+uclass+"'></div>
").appendTo( "#container" )
$(anm).css({ 'left':Math.random()*10*40, 'top':Math.random()*7*50 , 'zIndex':z++ });

var mp= new qa.MoviePng( ("."+uclass　),animationData);
mp.play("normal", Math.random()*48);
}

function uid(){
var r = Math.floor(Math.random()*1000)
var t = new Date().getTime();
return r + t.toString();
}

});

$(function(){

var animationData={

"fps":30,

"image":["common/image/fire.png"],

"size":[89,115],

"anime":{

"normal": [0, 48],

}

var z=0;

// MoviePngを複数表示

for (var i = 0; i < 10; i++) {

// ユニークなidを持ったクラス生成

var uclass = "anm"+uid();

// 親クラスにアニメーション用divを追加

var anm=$("

").appendTo( "#container" )

$(anm).css({ 'left':Math.random()*10*40, 'top':Math.random()*7*50 , 'zIndex':z++ });

var mp= new qa.MoviePng( ("."+uclass　),animationData);

mp.play("normal", Math.random()*48);

}

function uid(){

var r = Math.floor(Math.random()*1000)

var t = new Date().getTime();

return r + t.toString();

}

});

ソースの説明

ユニークなidを持ったクラスを作成

var uclass = "anm"+uid();

1	var uclass = "anm"+uid();

親のdivに対してアニメーション用のdivを追加する

var anm=$("
<div class='mov "+uclass+"'></div>
").appendTo("#container")

var anm=$("

").appendTo("#container")

divの座標と深度を設定

$(anm).css({ 'left':Math.random()*10*40, 'top':Math.random()*7*50 , 'zIndex':z++ });

1	$(anm).css({ 'left':Math.random()1040, 'top':Math.random()750 , 'zIndex':z++ });

生成したクラスをMoviePngインスタン化を行う

var mp= new qa.MoviePng( ("."+uclass　),animationData);
mp.play("normal", Math.random()*48);

1 2	var mp= new qa.MoviePng( ("."+uclass　),animationData); mp.play("normal", Math.random()*48);

これで完成したものがコチラ

DEMO

lg

おぼえがき