Question

我使用PIXI.js（第一次！）来设置一个基本过渡的渲染，其中一个精灵在画布上对角移动。转换过程中差不多一半，我正在改变纹理以使用另一个图像。它按预期工作。但我想知道如何获得淡入效果，因此图像的变化看起来并不突然。下面是我正在使用的代码（这里是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;首先使用alpha = 0（完全透明）。

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

不是交换纹理，而是在所需的位置触发alpha更改。

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

添加fadeIn过渡到PIXI sprite

1 个答案: