イナヅマTVログ

Canvas始めました – マウスを追っかけるアニメーション

| 1件のコメント

Canvasでアニメーションの2回目。
requestAnimationFrameを使ってみるの巻。

覚えたばかりのrequestAnimationFrameを使ってのアニメーションにマウスアクションを絡める。
マウスを追っかける、例のやつ。
Flash, ActionScriptの練習問題で何回も目にしたことのある古典的アニメーションをCanvasで再現。

ActionScriptに比べてコードが長くなったのはスキルが足りない自分のせい。

HTML

<canvas id='canvas'></canvas>

JavaScript

;(function (w, r) {
    w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };
})(window, 'equestAnimationFrame');
 
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
var ease = 0.1;
var ballPosition = {x:0, y:0};
var e = undefined;
 
context.fillStyle = 'rgb(255,0,0)';
 
function arc () {
    context.beginPath();
    context.arc(ballPosition.x, ballPosition.y, 15, 0, Math.PI*2, true);
    context.closePath();
    context.fill();
};
 
function draw () {
    if (e == undefined) {
        return;
    };
    context.clearRect(0,0,canvas.width,canvas.height);
    var x = y = 0;
    x = e.clientX - canvas.offsetLeft;
    y = e.clientY - canvas.offsetTop;
 
    ballPosition.x += (x - ballPosition.x) * ease;
    ballPosition.y += (y - ballPosition.y) * ease;
    arc();
};
 
function loop(){
    draw();
    requestAnimationFrame(loop);
};
 
function onMousemove (event) {
    e = event;
};
 
function init () {
    ballPosition.x = canvas.width * 0.5;
    ballPosition.y = canvas.height * 0.5;
    arc();
    window.addEventListener('mousemove', onMousemove, false);
    loop();
};
init();

Canvas Animation Demo, follow the mouse

大事なことだからもう1回書いとくけど、コードが長いのはスキルの足りない自分のせい。

Canvas上に描いた丸は単なる画像にしかならないのでFlashのDisplayObjectのように自身のpropertyを持つことができません。
今回は座標プロパティを使いたいので代わりになる手段(変数)を用意しないといけません。

requestAnimationFrameはCanvas始めました – アニメーションしてみる最初の一歩で追記した方法で実装しています。

ただこれだとネイティブのwindowインスタンスを汚染しちゃうので他の方法を検討したいと考えています。

update 2012-05-10
コードの書き方だと気がついた。
windowインスタンスにaddしなくても構わない、そのかわり変数化しなくてはいけないので今度は名前空間を汚染するけど…

var requestAnimationFrame = new function () {
    var s = 'equestAnimationFrame',
        w = window,
        r = w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r];
 
    return function (callback) {
        if (r) {
            return r(callback);
        };
        setTimeout(callback, 1000 / 60);
    };
};

こんな感じで関数作ればいいのかな。
実際に使う時は関数名はよーく考えないとだけど。

どっちかだよなぁ。
ネイティブにくっ付けちゃうか名前空間を汚染して放り出すか…

しかしもっとすっきりした関数が書けないものかなぁ。

update 2012-05-18
いやいや、グローバル変数だとwindow.でアクセスできるから同じことだった。

あと、これだと途中で止める(Pause)なことがやりにくいな、もっとちゃんと作りなおさないと。

1件のコメント

  1. ピンバック: Canvas始めました - Canvas APIで遊んで(遊ばれて)わかったことをだらだらと « イナヅマtvログ

コメントを残す

必須欄は * がついています