将fadeIn转换添加到PIXI精灵

Adding fadeIn transition to PIXI sprite

本文关键字：PIXI 精灵 添加 fadeIn 转换      更新时间：2023-09-26

我（第一次！）使用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);
}

好吧，由于要重新分配纹理引用，所以很难对渐变进行动画处理。

如果能够制作两个精灵，每个纹理一个精灵，则可以操纵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;
    }
相关文章：