我们来用pixi.js 来构建喷泉粒子
首先数据结构定义
let option = {
renderer: {
type: “simple”,
symbol: {
startColor: “#beffd1”,
endColor: “#91ffd7”,
maxLifetime: 0.35,
maxParticles: 300
}
},
data: [
{
geometry: [12697872.012783196, 2577456.5937789795],
attributes: {
name: “深圳”
}
},
{
geometry: [12956152.73135875, 4855356.473704897],
attributes: {
name: “北京”
}
},
{
geometry: [12127804.65583251, 4070118.8821315],
attributes: {
name: “西安”
}
}
]
};
我们使用pixi 粒子插件
import {Emitter} from “pixi-particles”;
喷泉的具体参数，由于参数过于复杂，我们抽选出简单的参数来配置
this.configuration = {
"alpha": {
"start": 1,
"end": 0.3
},
"scale": {
"start": 0.5,
"end": 1
},
"color": {
"start": this.options.renderer.symbol.startColor,
"end": this.options.renderer.symbol.endColor
},
"speed": {
"start": 600,
"end": 200
},
"acceleration": {
"x": 0,
"y": 3000
},
"startRotation": {
"min": 260,
"max": 280
},
"rotationSpeed": {
"min": 0,
"max": 0
},
"lifetime": {
"min": 0.25,
"max": this.options.renderer.symbol.maxLifetime
更多参考 https://xiaozhuanlan.com/topic/7894063521
