Question

我已经设置了一个脚本，可以在canvas元素上设置动画图像。我想要做的是跟踪图像的x，当它到达某个点时，它会生成另一个图像来制作动画，它似乎创建了太多的图像，直到它崩溃浏览器的任何帮助？代码的主要部分：

 function tick() {
     pauseTweens();

     for (var i = 0; i < linesArray.length; i++) {
         if (linesArray[i] >= 200 && linesArray[i] <= 210) {
             spawnSprite();
             linesArray = [];
         }
     }

     for (var i = items.length - 1; i >= 0; i--) {
         var item = items[i];
         console.log(item.x)
         if (item.x > stage.canvas.width) {
             stage.removeChild(item);
             items.splice(i, 1);
         }
     }

     stage.update();
 }

这是动画精灵的功能

function animate(asset, prop, val, duration) {
    var start = new Date().getTime();
    var end = start + duration;
    var current = asset[prop];
    var distance = val - current;
    var step = function () {
        var timestamp = new Date().getTime();
        var progress = Math.min((duration - (end - timestamp)) / duration, 1);
        asset[prop] = current + (distance * progress);
        var a = Math.round(asset.x);
        linesArray.push(a)

        if (progress < 1) requestAnimationFrame(step);
    };

    return step();
};

这会创建精灵

 function spawnSprite() {
     linesArray = [];
     console.log("spawnSprite");
     spawnNow = false;
     var asset = buildSprite(sprite);
     animate(asset, 'x', -40, p.duration);
     animate(asset, 'y', 20, p.duration);
     animate(asset, 'alpha', 0, p.duration);
     animate(asset, 'scaleY', .2, p.duration);
     animate(asset, 'scaleX', .2, p.duration);
     items.push(asset)
 }

动画精灵，添加许多图像以进行分阶段

0 个答案: