使用echarts与zrender制作攻击效果


看图。使用动态模糊做出尾迹&＃xff0c;在攻击点到达目的地时生成一个圆&＃xff0c;然后再让圆动画放大&＃xff0c;透明度减小。
使用方法&＃xff1a;
官方例子中选择模拟迁徙。然后在代码最下方加入以下代码。


var zr&＃61;myChart.getZr();setInterval(doani,1000)function doani(){var x1&＃61;Math.random()*200;var y1&＃61;Math.random()*200;var x2&＃61;Math.random()*600;var y2&＃61;Math.random()*600;var circle&＃61;new echarts.graphic.Circle({position: [x1,y1],scale: [1, 1],shape: {cx: 0,cy: 0,r: 2},style:{fill:&＃39;white&＃39;},zlevel:3});var circle2&＃61;new echarts.graphic.Circle({position: [x2,y2],scale: [1, 1],shape: {cx: 0,cy: 0,r: 0},style:{fill:&＃39;none&＃39;,stroke:&＃39;red&＃39;,opacity:1,},zlevel:3});/*动态模糊*/zr.configLayer(3, {motionBlur: true,lastFrameAlpha: 0.8,});/*动画部分*/circle.animate(&＃39;&＃39;, false).when(1000, {position: [x2,y2]}).start().done(function(){zr.remove(circle);circle2.animateTo({shape: {cx: 0,cy: 0,r: 50},style:{fill:&＃39;none&＃39;,stroke:&＃39;red&＃39;,opacity:0,},},1000,&＃39;cubicOut&＃39;)})zr.add(circle2);zr.add(circle);}