將fadeIn轉換添加到PIXI sprite

我使用PIXI.js（第一次！）設置基本轉換的渲染，其中sprite沿着畫布對角線移動。在轉換過程中幾乎有一半，我正在更改紋理以使用其他圖像。它按預期工作。但我想知道如何獲得淡入效果，因此圖像中的更改看起來並不突兀。以下是我使用的代碼（這裏是jsfiddle）。將fadeIn轉換添加到PIXI sprite

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

來源

2016-07-29 Web User

好吧，既然您正在重新分配紋理參考，這可能很難使淡入淡出。

如果你能夠製作兩個精靈，每個紋理一個，那麼你可以操縱.alpha字段。我叉你的jsfiddle證明這一點：

https://jsfiddle.net/55zvq716/

添加第二個精靈持有質地2;使它從alpha = 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; 
    }

來源

2016-07-29 23:01:27

所以這兩個精靈與一個在另一個之上一起移動，並在一個消失，另一個同時淡出使用他們的阿爾法？這有效......謝謝！ –

我正在嘗試呈現持續指定時間的轉換。換句話說，我想讓交叉淡入持續10秒。我對圖形（web或其他），幀速率等方面的經驗很少，但我會想象幀速率與每次操作alpha之間的時間之間存在某種相關性。我如何實現定時轉換，即持續N秒？ –

將fadeIn轉換添加到PIXI sprite

回答

相關問題