1

javascriptでキーボードイベントを行うのはこれが初めてですが、実際にはアニメーションが機能することはわかっています。アイデアは非常に単純です。ユーザーがEnterキーを押すと、長方形が動くアニメーションを再生します。以下は私のコードです。

//Event listeners
window.addEventListener("keydown", onKeyDown, false);

function onKeyDown(event){
    var keyCode = event.keyCode;
    switch(keyCode){
        case 13  //enter
            drawStuff();
        break;
    }
}

//code to be executed onKeyDown
function drawStuff(){
var x = document.getElementById("myCanvas");
var canvas = x.getContext('2d');

var i = 0;

function animate(){
    if(i < 451){
        canvas.clearRect(0,0,500,500);
        canvas.fillStyle="red";
        canvas.fillRect(30,i,50,50);
        i++;
    }
    else{}
}

window.setInterval(animate, 1);
}

これを修正する方法の提案はありますか？

4

1 に答える 1

0

ポール・アイリッシュのrequestAnimationFrameシムを見てください。rAFには、setIntervalメソッドに比べて多くの利点があります。これは主にこれを行うために構築されていますが、ブラウザの準備ができたときにのみフレームを要求するため、Webサイトがバックグラウンドにあるときに発生する処理を一時停止します。また、切り替えたときのパフォーマンスがスムーズであることに気づきました。

私はこのようなものがうまくいくはずだと思います：

var animationHasTriggered = false;
var x = document.getElementById("myCanvas");
var canvas = x.getContext('2d');
var keysDown = {};

var i = 0;

window.addEventListener('load', function()
{
    addEventListener("keydown", function(e)
    {
        keysDown[e.keyCode] = true;
    }, false);

    addEventListener("keyup", function(e)
    {
        delete keysDown[e.keyCode];
    }, false);

    updateAll();

}, false);

function updateAll()
{
    if (13 in keysDown || animationHasTriggered)
    {
        animationHasTriggered = true;
        animate();
    }
    requestAnimationFrame(updateAll);
}

function animate()
{
    if (i < 451)
    {
        canvas.clearRect(0,0,500,500);
        canvas.fillStyle="red";
        canvas.fillRect(30,i,50,50);
        i++;
    }
    else
    {
        animationHasTriggered = false;
    }
}
(function()
{
    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x)
    {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element)
    {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function()
        {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id)
    {
        clearTimeout(id);
    };
}());
于 2013-01-16T13:16:54.913 に答える