svg画线动画(画直线/画长度相同的虚线/画长度不同的虚线)

因为项目需要svg做一个连线动画,网上找了很多插件都不是很满意,于是自己写了一个动画.

直线.gif

虚线.gif

不同长度的虚线.gif

思想是

画直线
1.能用css实现的尽量不用js,css就能完全实现直线的连线动画
2.获取线的长度
3.设置线的初始小段长度和间隔都为线的长度本身
4.设置线的偏移量为线的长度本身
5.参数和虚线参数意义一样

drawStrightLine:function(obj,duration){
    if(arguments.length<2){
        return '参数错误';
    }
    return (function(){
        
        var totalLength = $('#' + obj.id)[0].getTotalLength();
        var anmt = 'drawStrightLine '+duration+'s linear 1 ';
        $('#' + obj.id).css('strokeDasharray', totalLength+','+totalLength);
        $('#' + obj.id).css('strokeDashoffset',totalLength);
        $('#' + obj.id).css('animation', anmt);
    })()
}

css代码
@keyframes drawStrightLine{
    100%{
        stroke-dashoffset: 0;
    }
}

画虚线

1.先获取到线的长度.
2.计算虚线一个轮回每一段的平均长度
3.计算动画要执行的次数
4.设置定时器,将动画重复执行达到画线效果.
5.在绘画完成后,将线strokeDasharray设置成简单模式
6.画每一段长度相同的虚线时.dotted参数数组只有两个值

drawLongShortLine:function(obj,duration,dotted){
    //参数少于3个的时候不执行
    if(arguments.length<3){
        return '参数错误';
    }
    return (function(){
        /*
         * 传入的参数:
         * obj:要做动画的线;
         * duration:动画的总时间,单位秒;
         * dotted:传入数组,前n个参数是每一段的长度,最后一个参数是每一段间隔距离;
         * 变量名解释:
         * totalLength:线的总长度;
         * dottedLength:前n段的平均长度;
         * total:需要把整个动画分成的段数;=>总长度/(前n段的平均长度+间隔长度)
         * str:每一小段的样式;
         * duration:每一次执行时间;
         * count:已经执行的次数;
         * current:当前执行到第几段
         * finish:结束时候线的样式
         */
        var arrayLength = dotted.length;
        var lineSpace = dotted[arrayLength-1];
        var dottedLength = 0;
        var finish = '';
        //算出所有段的长度,求出平均长度
        for(var i=0;i=(arrayLength-2)?0:current+=1;
                //判断是否执行完毕
                if(count

本次传入的obj是我自己封装的线对象,不是jq对象,不是我多此一举 -_-也可以直接传入jq对象,后面的$('#+obj.id')全部换成obj