SVG实现攻击效果

本攻击效果基于SVG属性实现，具体包括如下两个核心属性：

• stroke-dasharray
• stroke-dashoffset

---

属性简介

stroke-dasharray用于设置svg虚线，其值包括两个部分，用逗号或者空格分开。第一部分是虚线长度，第二部分是虚线之间的间隔。stroke-dashoffset用于设置svg虚线的起始偏移量。通过设置两个属性，可以获得动画描边等效果。
两个属性详情见网页：http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/

攻击效果实现具体代码

代码块语法遵循标准markdown代码，例如：

        const callback = function (timestamp) {
            lines.attr('stroke-dashoffset', function (d) {
                let strokeDashoffset = Number(d3.select(this).attr('stroke-   dashoffset'));
                // 也可以用百分比
                // 动画也可以用 CSS3 参考：http://www.tuicool.com/articles/FnEv2q
                return strokeDashoffset < 0 ? d.lineLength : strokeDashoffset - ((0.001 * d.lineLength) + speed);
            });
            requestAnimationFrame(callback);
        };
        //requestAnimationFrame(callback);
        callback();
    };

    let
            lineData=[{value:1},{value:2}],
            width=600,
            height=400;

    let
            svg=d3.select("body")
            .append("svg")
            .attr("width",width)
            .attr("height",height);

    const lines=svg.selectAll(".line")
            .data(lineData)
            .enter()
            .append("line")
            .attr("x1",50)
            .attr("y1",200)
            .attr("x2",350)
            .attr("y2",200)
            .attr("stroke","grey")
            .attr("stroke-dasharray",function(d){d.lineLength=300;return "20 "+300})
            .attr("stroke-dashoffset",0);

    animateLines(lines,2.5)