我们来用pixi.js 来构建火焰粒子
首先数据结构定义
let option = {
renderer: {
type: "simple",
symbol: {
startColor: "#ffb256",
endColor: "#fff25f",
maxLifetime: 0.3,
maxParticles: 200
}
},
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";
火焰粒子的具体参数，由于参数过于复杂，我们抽选出简单的参数来配置
```javascript
this.configuration = {
"alpha": {
"list": [
{"value":0.62, "time":0},
{"value":0, "time":0.6},
{"value":0, "time":0.7},
{"value":0, "time":1}
],
"isStepped": false
},
"scale": {
"list": [
{"value":0.2, "time":0},
{"value":0.4, "time":1}
],
"isStepped": false
},
"color": {
"start" : this.options.renderer.symbol.startColor,
"end": this.options.renderer.symbol.endColor,
},
"speed": {
"list": [
{"value":400, "time":0},
{"value":300, "time":0.7},
{"value":300, "time":1},
],
"isStepped": true
},
"startRotation": {
"min": 265,
"max": 275
},
"rotationSpeed": {
"min": 30,
"max": 30
},
"lifetime": {
"min": 0.1,
"max": 0.3
更多参考 https://xiaozhuanlan.com/topic/0263948715
网友评论