从列表创建CreateJS动画图像无效

时间:2018-08-19 14:09:50

标签: javascript html web createjs

在createJs中使用列表加载图像时,我遇到了一个小问题。

这是问题,我将多个图像放入列表中,然后通过创建一个Image对象然后为每个图像对象创建一个位图对象来初始化它们。

完成后,我将它们添加到舞台上。 当我想给它们设置动画时,问题就来了,我创建了一个股票代码并在下面的tick函数中执行它,但是动画无法正常工作,即使里面的stage.update(event)都可以正常工作,因为我可以看到导航上的图像。

代码如下:

    var stage;
    //my images list source
    var imageSrc = ["Duck1.jpg", "Duck2.jpg", "Duck3.jpg", "Duck4.jpg"];
    // images list once initialized with the image object
    var imageList = [];
    //bitmap list 
    var bitmapList = [];
    //oneImage -> used for initialisation of every image 
    var oneImage;

    function init() {

        stage = new createjs.Stage("myCanvas");
        // creating an Image() object for every image
        for (var i = 0; i < imageSrc.length; i++) {
            oneImage = new Image();
            oneImage.src = imageSrc[i];
            imageList[i] = oneImage;
            imageList[i].onload = handleImageLoad
        }

    }

    function handleImageLoad(event) {
         // creating an Bitmap() object for every image
        for (var i = 0; i < imageList.length; i++) {
            bitmapList[i] = new createjs.Bitmap(imageList[i]);
            bitmapList[i].y = 200 + imageList[i] * 10
            createjs.Ticker.on("tick", tick);
            stage.addChild(bitmapList[i]);

        }
    }

     function tick(event){
        // animation dosnt work 
        bitmapList[0].y = bitmapList[0].y + 50;
        if (bitmapList[0].y > stage.canvas.height) { bitmapList[0].y = 0; }
        // updating the stage works perfectly
        stage.update(event);            
      }

0 个答案:

没有答案