CODEWITHSUNDEEP
animationhtml5-canvaseaseljs
user3568765
user3568765

Reputation: 1

easeljs images blinking when updating

I'm using easeljs in order to control my CANVAS. And I'm trying to make animation by changing images, but not using spritesheet. But whenever images are changed there is time lag( like blinking)... How can I remove blinking not using spritesheet?

Upvotes: 0

Views: 561

Answers (1)

Absulit
Absulit

Reputation: 1955

My guess (until you provide code), is that the image is being loaded during this gap, that's why you see a blink, and this is because you are loading the image in the same container (meaning the place where the image is loaded/displayed).

The solution to this is to use 2 containers, one in the top of the other; you have the first image loaded, and when you load the next image, you set a complete event on that second image, and when the second image loads, you remove the first one.

In the end you will have to create a class to manage both images and their events, this because if you are trying i.e. creating an image rotator, you will have to swap the bottom image loaded to the top, to make a smooth transition, and/or to add an alpha tween.

This is a very simple outline:

Container
    topImage
    bottomImage

this.addChild(topImage)
this.addChild(bottomImage)

bottomImage.on("complete", function(){
    //add effect to top image (fade out)
    //load image into top image
    //fadein effect
})

topImage.on("complete", function(){
    //first time you have to add an fade in
    //but you can remove the event after that
})

this.load = function(path){
    bottomImage.load(path)
}

Upvotes: 1

Related Questions