업데이트 할 때 easeljs 이미지가 깜박입니다.

Question

CANVAS를 제어하기 위해 easeljs를 사용하고 있습니다. 그리고 이미지를 변경하여 애니메이션을 만들려고하지만 스프라이트 시트는 사용하지 않습니다. 그러나 이미지가 변경 될 때마다 깜박임과 같은 시간 지연이 있습니다 ... 스프라이트 시트를 사용하지 않고 깜박임을 제거하려면 어떻게해야합니까?

Answer 1

내 생각에 (코드를 제공 할 때까지)이 간격 동안 이미지가로드되고있는 것이므로 깜박임이 나타나는 이유는 동일한 컨테이너에 이미지를로드하기 때문입니다 (즉, 이미지가로드/표시됨).

이 해결책은 2 개의 컨테이너를 사용하는 것입니다. 첫 번째 이미지가로드되고 다음 이미지를로드 할 때 두 번째 이미지에 전체 이벤트를 설정하고 두 번째 이미지가로드되면 첫 번째 이미지를 제거합니다.

마지막으로 이미지와 이벤트를 관리하는 클래스를 만들어야합니다. 이미지 로테이터를 만들려는 경우 아래쪽 이미지를 맨 위에로드 된 이미지와 바꿔야하기 때문입니다. 부드러운 전환 및/또는 알파 트윈을 추가 할 수 있습니다.

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