pixi.jsでアニメーションする

pixijs-animation.png

平行移動アニメ

<script src="http://miffysora.wikidot.com/local--files/webgl/pixi.min.js" type="text/javascript"></script>
</script>
<script type='text/javascript' >
// 初期化関数は`new PIXI.WebGLRenderer`か, `new PIXI.CanvasRenderer`, か`PIXI.autoDetectRenderer`です
var winWidth=200;
var winHeight=200;
var renderer = new PIXI.WebGLRenderer(winWidth, winHeight, {transparent:true});
//renderer.backgroundColor = 0xFFFFFF;
//<canvas>要素をbodyに追加します
document.body.appendChild(renderer.view);
 
//まず、 ルートコンテナを作成しないといけません。描画シーンのコンテナになります。
var stage = new PIXI.Container();
 
//テクスチャをロードします
var texture = PIXI.Texture.fromImage('http://miffysora.wdfiles.com/local--files/pixijs/favisora.png');
    //png画像からテクスチャを生成します。
    var bunny = new PIXI.Sprite(texture);
 
   //回転中心をセット
   bunny.anchor.x = 0.5;
   bunny.anchor.y = 0.5;
   //主人公の位置座標をセット
    bunny.position.x = 30;
    bunny.position.y = 30;
    //主人公の大きさをセット
    bunny.scale.x = 2;
    bunny.scale.y = 2;
 
    // 主人公をシーンに追加します
    stage.addChild(bunny);
   //主人公の動く方向
   var sign = 1;
    // アニメーションループをスタートします
    animate();
 
function animate() {
    //アニメーションループをスタートさせる
    requestAnimationFrame(animate);
    //左右のランダムな方向に動かす
    var roulett=Math.random()*10.0%2;//0 or 1のランダムな値
 
    //画面からはみ出ないように制御
     if(bunny.position.x==0 || bunny.position.x==winWidth) {sign*=-1;//方向転換する
}
    bunny.position.x += sign*1;
    renderer.render(stage);
}
</script>
<body>
</body>

requestAnimationFrame

javascriptの一般的な関数。ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。


animation

サポートサイト Wikidot.com animation