zrender-粒子动画

效果：

 

 

let x = shuN.style.x + rectValue/4,//粒子开始的地方
y = zuY+140 + 5,
h = 14*0.8,
w = rectValue/2;
this.drawParticles(x, y , w, h, 20, 0, i);

//画牵引粒子

drawParticles(x, y, w, h, num, seriesId, dataId) {//x, y , w, h, 20, 0, i
let partclesGroup = this.getSave('partclesGroup', seriesId, dataId);
if(!partclesGroup) {
partclesGroup = new zrender.Group();
this.zr.add(partclesGroup);
this.setSave(partclesGroup, seriesId, dataId, 'partclesGroup')
} else {
return;
partclesGroup.removeAll();
}

for(let i = 0; i < num; i++) {
let targetH = Math.random() * w/ 6;//随机
let p = new zrender.Rect({
shape: {
// x: x + Math.random() * (w - 2),
// y: y + h,
x: x +w/2,
y: y + Math.random() * (h - 2),//高度随机改变
width: 2,//粒子的宽
height: 2//粒子的高
},
style: {
fill: '#0d81e8',
opacity: 0
}
})
partclesGroup.add(p);
let time = w * 10;
let curtime = time * (targetH + w / 2) / w;
//改变x的位置
p.animate('shape', true).when(curtime + 1000, {
x: x-w/4
}).delay(i * 90 + 500).start();
//每个时刻的透明度
p.animate('style', true).when(1000, {
opacity: 1
}).when(curtime / 2 + 1000, {
opacity: 1
}).when(curtime + 1000, {
opacity: 0
}).delay(i * 50 + 500).start();
}

}

 

为便于看