PIXI 스프라이트에 fadeIn 트랜지션 추가

Question

처음으로 PIXI.js를 사용하여 스프라이트가 캔버스에서 대각선으로 움직이는 초보적인 트랜지션 렌더링을 설정했습니다. 전환 도중에 거의 절반 정도, 다른 이미지를 사용하기 위해 텍스처를 변경하고 있습니다. 그것은 예상대로 작동합니다. 그러나 fadeIn 효과를 얻는 방법을 알고 싶습니다. 그래서 이미지의 변화가 갑자기 보이지 않습니다. 아래는 내가 사용하고있는 코드입니다 (여기는 jsfiddle입니다).

var stage = new PIXI.Container(); 
var renderer = PIXI.autoDetectRenderer(150, 150, rendererOptions); 
document.body.appendChild(renderer.view); 
var texture = PIXI.Texture.fromImage('https://images-na.ssl-images-amazon.com/images/I/81W02uGnuLL._OU01_AC_UL160_SR160,160_.png', true); 
var texture2 = PIXI.Texture.fromImage('https://images-na.ssl-images-amazon.com/images/I/81887k9tnQL._OU01_AC_UL160_SR160,160_.png', true); 
var sprite = new PIXI.Sprite(texture); 
sprite.position.x = 0; 
sprite.position.y = 0; 
stage.addChild(sprite); 

animate(); 

function animate() { 
    if (sprite.position.x < renderer.width 
     || sprite.position.y < renderer.height) { 

     if (sprite.position.x == 35) { 
      sprite.texture = texture2; 
     } 
     requestAnimationFrame(animate); 
    } 

    sprite.position.x += 0.5; 
    sprite.position.y += 0.5; 
    renderer.render(stage); 
} 

Answer 1

텍스처 참조를 다시 할당하기 때문에 페이드를 애니메이션으로 적용하는 것이 매우 어려울 수 있습니다.

각 텍스처마다 하나씩 두 개의 스프라이트를 만들 수 있다면 .alpha 필드를 조작 할 수 있습니다. 나는이 보여 당신의 jsfiddle 갈래 :

https://jsfiddle.net/55zvq716/

텍스처 2를 보유 할 두 번째 스프라이트를 추가하기; 알파 = 0 (완전 투명)으로 시작합니다. 대신 텍스처 스와핑

var sprite2 = new PIXI.Sprite(texture2); 
    sprite2.alpha = 0; 
    sprite2.position.x = 0; 
    sprite2.position.y = 0; 

원하는 시점에서 알파 변화를 발생시킨다.

if (sprite.position.x >= 35 && sprite2.alpha < 1) { 
     sprite.alpha -= .01; 
     sprite2.alpha += .01; 
    }