使用echarts 与zrender 制作攻击效果

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

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

        zr.add(circle2);
        zr.add(circle);
       }