pixijs做粒子拖尾效果

 



<script type="text/javascript">
 const app = new PIXI.Application({ backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

let emitterContainer = new PIXI.Container();
app.stage.addChild(emitterContainer);

let emitter = new PIXI.particles.Emitter(

    // The PIXI.Container to put the emitter in
    // if using blend modes, it's important to put this
    // on top of a bitmap, and not use the root stage Container
    emitterContainer,

    // The collection of particle images to use
    [PIXI.Texture.from('https://eia.github.io/ironman/2021/demo/2020_10_10-2/particle.png')],

    // Emitter configuration, edit this to change the look
    // of the emitter
    {
        "alpha": {
            "start": 1,
            "end": 0
        },
        "scale": {
            "start": 0.1,
            "end": 0.01,
            "minimumScaleMultiplier": 1
        },
        "color": {
            "start": "#e4f9ff",
            "end": "#3fcbff"
        },
        "speed": {
            "start": 200,
            "end": 50,
            "minimumSpeedMultiplier": 1
        },
        "acceleration": {
            "x": 0,
            "y": 0
        },
        "maxSpeed": 0,
        "startRotation": {
            "min": 0,
            "max": 360
        },
        "noRotation": false,
        "rotationSpeed": {
            "min": 0,
            "max": 0
        },
        "lifetime": {
            "min": 0.2,
            "max": 0.8
        },
        "blendMode": "normal",
        "frequency": 0.001,
        "emitterLifetime": -1,
        "maxParticles": 500,
        "pos": {
            "x": 0,
            "y": 0
        },
        "addAtBack": false,
        "spawnType": "circle",
        "spawnCircle": {
            "x": 0,
            "y": 0,
            "r": 0
        }
    }
);

// Calculate the current time
var elapsed = Date.now();


// Start emitting
emitter.emit = true;
var xssx=0;
var xssy=0;
app.ticker.add((delta) => {
    xssx+=6
    xssy+=1
    var now = Date.now();
    // The emitter requires the elapsed
    // number of seconds since the last update
    emitter.update((now - elapsed) * 0.001);
    elapsed = now;
     //这个是设置粒子坐标 达到拖尾效果
      emitter.updateOwnerPos(xssx,xssy)

    // Should re-render the PIXI Stage
    // renderer.render(stage);
});
        </script>


 https://pixijs.io/pixi-particles-editor/ 这个是粒子编辑器


​