在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);
}