更新时画架图像闪烁答案

【问题标题】：easeljs images blinking when updating更新时画架图像闪烁
【发布时间】：2014-06-09 17:46:32
【问题描述】：

我正在使用easeljs 来控制我的画布。我正在尝试通过更改图像来制作动画，但不使用 spritesheet。但是每当图像发生变化时，都会有时间延迟（比如闪烁）...... 如何在不使用 spritesheet 的情况下消除闪烁？

【问题讨论】：

欢迎来到 SO！请在问题中提供代码，如果可能的话，请提供小提琴，以便可以重现问题。
您的图片是预先加载的吗？临时请求它们可能会有一些延迟。

标签： animation html5-canvas easeljs

【解决方案1】：

我的猜测（直到您提供代码）是在此间隙期间正在加载图像，这就是您看到闪烁的原因，这是因为您将图像加载到同一个容器中（即图像所在的位置）已加载/显示）。

解决方案是使用 2 个容器，一个在另一个顶部；你已经加载了第一张图片，当你加载下一张图片时，你在第二张图片上设置了一个完整的事件，当第二张图片加载时，你删除了第一个。

最后你必须创建一个类来管理图像和它们的事件，这是因为如果你正在尝试创建一个图像旋转器，你将不得不交换底部图像加载到顶部，以使平滑过渡，和/或添加 alpha 补间。

这是一个非常简单的大纲：

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

【讨论】：