pixijs做粒子拖尾效果
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/ 这个是粒子编辑器
如果遇到什么不懂的地方直接关注公众号留言(本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。)
作者:newmiracle
出处:https://www.cnblogs.com/newmiracle/