こんにちは。CTOのづやです。
最近のサイトはぐいんぐいんと動いてたりしますよね。私も負けずにぐいんぐいん動かしたいなと思っていたのですが、素で書くにはなかなか難易度が高そうです。
そんなとき、弊社のエンジニア・ハカセがPixi.jsというライブラリを教えてくれました。Canvasライブラリの中では最速とのこと。
そこで今回は、そのPixi.jsを初めて触って簡単にアニメーションを作成してみた話を紹介したいと思います。
- Pixi.js
Pixi.jsの基本
まずは公式サイトのダウンロードボタンを押し、遷移先のGitHubよりコードを落としてきます。
- GitHub
https://github.com/GoodBoyDigital/pixi.js
ダウンロードした中のexamplesフォルダの中には、サンプルがたくさんあります。
1つ目のサンプルを見てみましょう。
動物がくるくるまわっております。
script部分は以下のような感じになってました。
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(400, 300);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame(animate);
// create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png");
// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);
// center the sprites anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// move the sprite to the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;
stage.addChild(bunny);
function animate() {
requestAnimFrame(animate);
// just for fun, let's rotate mr rabbit a little
bunny.rotation += 0.1;
// render the stage
renderer.render(stage);
}ざっくり言えば、ステージとレンダリング用のエリアを作って画像を配置し、画像の角度をちょっとずつ変えてるみたいなことでしょうか。
Pixi.jsでアニメーションを作成する
先ほどのサンプルのコードを参考に、とりあえず自分でコメントをつけながら書いてみました。以下ご参照ください。
window.addEventListener('load', function(){
// 使う変数を指定
var isScaleUp = true;
var WIDTH = 640 , // ステージの横幅
HEIGHT = 640 , // ステージの高さ
SCALE_CHANGE_NUMBER = 0.05 , // アニメーション1回単位で変化させるスケール
SCALE_UP_LIMIT = 0.8 , // 最大のスケール
SCALE_DOWN_LIMIT = 0.2; // 最少のスケール
// ステージを作ります。引数で背景色が渡せます
var stage = new PIXI.Stage(0xff00ff);
// 横幅と高さを指定してステージを作ります
var renderer = PIXI.autoDetectRenderer(WIDTH , HEIGHT);
// 描画エリアをbodyに追加します。
document.body.appendChild(renderer.view);
// アニメーションフレームで「animet」関数を呼びます
requestAnimFrame(animate);
// 画像パスからテクスチャを作成します。
var texture = PIXI.Texture.fromImage("img/taka.jpg");
// テクスチャをもったスプライトを作成します。
var sprite = new PIXI.Sprite(texture);
// 回転する点を中心にします。(デフォルトは1,1で左上)
sprite.anchor.x = 0.5;
sprite.anchor.y = 0.5;
// スプライトをセンターに配置します。
sprite.position.x = 320;
sprite.position.y = 320;
// スケールを半分にする
sprite.scale = new PIXI.Point(0.5 , 0.5);
// ステージにテクスチャを追加します。
stage.addChild(sprite);
/**
* アニメーション用の関数
*/
function animate() {
// 1回しか呼ばれないので、もう1回自分を呼びます。そうやって永遠に動き続けます
requestAnimFrame(animate);
// 角度に0.1を追加します。
sprite.rotation += 0.1;
// あまりにもサンプルのままなので、スケールも変化させてみる
var nowScale = bunny.scale ,
pointX = nowScale.x,
pointY = nowScale.y;
// スケールをアップしていったりダウンしていったりさせる
if(isScaleUp) {
pointX += SCALE_CHANGE_NUMBER;
pointY += SCALE_CHANGE_NUMBER;
if(pointX > SCALE_UP_LIMIT) {
pointX = SCALE_UP_LIMIT - SCALE_CHANGE_NUMBER;
pointY = SCALE_UP_LIMIT - SCALE_CHANGE_NUMBER;
isScaleUp = false;
}
} else {
pointX -= SCALE_CHANGE_NUMBER;
pointY -= SCALE_CHANGE_NUMBER;
if(pointX < SCALE_DOWN_LIMIT) {
pointX = SCALE_DOWN_LIMIT + SCALE_CHANGE_NUMBER;
pointY = SCALE_DOWN_LIMIT + SCALE_CHANGE_NUMBER;
isScaleUp = true;
}
}
// 新しいスケールの値を設定
sprite.scale = new PIXI.Point(pointX , pointY);
// render the stage
renderer.render(stage);
}
});さいごに
いかがでしたでしょうか。今回自分で書いて、なんとなく感覚がつかめた気がしますので、次回以降もうちょっと試していきたいと思います。
みなさんもぜひチャレンジしてみてください。それでは、また。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
