0

私はHTML5アプリケーションを開発しており、すべてのアニメーション間で特定の速度と特定のタイムアウトを使用して、キャンバス上に一連の画像を描画しています。

何度でも使える機能を作ってみました。

var imgNumber = 0;
var lastImgNumber = 0;
var animationDone = true;

function startUpAnimation(context, imageArray, x, y, timeOut, refreshFreq) {
    if (lastImgNumber == 0) lastImgNumber = imageArray.length-1;

    if (animationDone) {
        animationDone = false;
        setTimeout(playAnimationSequence, timeOut, refreshFreq);
    }
    context.drawImage(imageArray[imgNumber], x, y);
}

function playAnimationSequence(interval) {
    var timer = setInterval(function () {
        if (imgNumber >= lastImgNumber) {
            imgNumber = 0;
            clearInterval(timer);
            animationDone = true;
        } else imgNumber++;
    }, interval);
}

私のメインコードでは、適切なパラメータを使用してstartUpAnimationを実行するたびに、問題なく機能します。しかし、画面上に複数のアニメーションを同時に描画したい場合、それぞれを異なる間隔と速度で描画しても機能しません。

startUpAnimation(context, world.mushrooms, canvas.width / 3, canvas.height - (canvas.height / 5.3), 5000, 300);
startUpAnimation(context, world.clouds, 100, 200, 3000, 100);

これで、両方のアニメーションが正しい場所に表示されますが、最初に呼び出されたアニメーションの間隔とタイムアウトの両方でアニメーション化されるため、私の場合は5000タイムアウトと300間隔です。

すべてが独立して再生されるようにこれを修正するにはどうすればよいですか？クラスか何かにする必要があると思いますが、どうすれば修正できるのかわかりません。場合によっては、この機能で同時に5つのアニメーションを表示する必要があります。

どんな助けでもいただければ幸いです！

4

2 に答える 2

1

このようなことを試してください

            var Class = function () {
            this.imgNumber = 0;
            this.lastImgNumber = 0;
            this.animationDone = true;

        }
        Class.prototype.startUpAnimation = function(context, imageArray, x, y, timeOut, refreshFreq) {
            //     if (lastImgNumber == 0) lastImgNumber = imageArray.length-1;

            if (this.animationDone) {
                this.animationDone = false;
                setTimeout(this.playAnimationSequence, timeOut, refreshFreq, this);
            }
            //     context.drawImage(imageArray[imgNumber], x, y);
        };

        Class.prototype.playAnimationSequence = function (interval, object) {
            var that = object; // to avoid flobal this in below function
            var timer = setInterval(function () {
                if (that.imgNumber >= that.lastImgNumber) {
                    that.imgNumber = 0;
                    clearInterval(timer);
                    that.animationDone = true;
                    console.log("xxx"+interval);
                } else that.imgNumber++;
            }, interval);
        };


        var d = new Class();
        var d1 = new Class();
        d.startUpAnimation(null, [], 300, 300, 5000, 50);

        d1.startUpAnimation(null,[], 100, 200, 3000, 60);

それはうまくいくはずです、

于 2013-02-22T13:36:33.127 に答える
0

私が見る限り、startUpAnimation の各呼び出しはすぐにキャンバスに描画されます。これは、この実行 (drawImage(..) 呼び出し) が setTimeout または setInterval のコールバックに含まれていないためです。

于 2013-02-22T12:49:00.400 に答える