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

テクスチャ参照を再割り当てするので、フェードをアニメーション化するのはかなり難しいかもしれません。

テクスチャごとに1つずつ2つのスプライトを作成できる場合は、アルファフィールドを操作できます。私はこれを証明するためにあなたのjsfiddleをフォーク：テクスチャ2を保持するために第2のスプライトを追加

https://jsfiddle.net/55zvq716/

を。アルファ= 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; 
    }