我们来用pixi.js 来实现爆炸粒子
首先数据结构定义
- let option = {
- renderer:{
- type:'simple',
- symbol:{
- url:'',
- json:'',
- spriteScale: 0.5,
- animationSpeed: 0.6,
- spriteTint: "#FFFFFF"
- }
- },
- data: [
- {
- geometry: [12956152.73135875, 4855356.473704897],
- attributes: {
- name: "北京"
- }
- },
- {
- geometry: [12697872.012783196, 2577456.5937789795],
- attributes: {
- name: "深圳"
- }
- }
- ]
- };
我们通过一些全局变量保存一些信息
- this.graphics = [];
在初始的时候
```javascript
for (let i in data) {
let item = data[i];
let geo = item.geometry
//获取转换后的屏幕坐标
let XY1 = toScreen(geo);
//加载需要使用的精灵图，加载完成后调用函数onAssetsLoaded
const loader = new PIXI.Loader();
//爆炸位图配置文件
loader.add('spritesheet', './static/spritesheet/mc.json');
loader.load(onAssetsLoaded);
//改变函数onAssetsLoaded中的this指向
let that = this;
function onAssetsLoaded() {
//创建存放纹理的列表