svg 实现圆弹性特效,基于圆线圆案例

- 日理万妓 2021-07-24 13:31 665阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{ 
                width:780px;
                height:400px;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div style="border:solid 1px orange;" class='box'>
            
        </div>
    
        <script>
            window.onload=function(){ 
    
                //命名空间
             let svgNS="http://www.w3.org/2000/svg";
    
    
            // //获取父级元素
            var div=document.querySelector('.box');
            
            var dx=div.offsetWidth/2;
            var dy=div.offsetHeight/2;
    
            var data={ 
                //中心圆
                centerNode:{ text:'科鲁兹'},
                //圆线,因为另一个圆和线都是根据该圆的中心坐标来的
                otherNode:[
                    { x:100,y:100,text:'易车网'},
                    { x:200,y:50,text:'易车网2'}
                ]
            }
    
                //封装创建标签
            function createTag(tag,obj){ 
                var oTag=document.createElementNS(svgNS,tag);
                for(var attr in obj){ 
                    oTag.setAttribute(attr,obj[attr]);
                }
    
                return oTag;
    
            }
    
            //创建最中心的圈
            function addTag(){ 
                var osvg=createTag('svg',{ 'xmlns':'svgNS','width':'100%','height':'100%'})
                var og=createTag('g',{ 'style':'cursor:pointer'});
                var ocircle=createTag('circle',{ 'cx':dx,'cy':dy,'r':'60', 'fill':'white','stroke':'#FF0000'})
                var otext=createTag('text',{ 'x':dx,'y':dy+5,'text-anchor':'middle','font-size':'10'})
                otext.innerHTML=data.centerNode.text;
    
                //调用创建其他线和圆
                for(var i=0;i<data.otherNode.length;i++)
                { 
                    addOtherTag(data.otherNode[i],osvg);
                }
                
                og.appendChild(ocircle);
                og.appendChild(otext);
                osvg.appendChild(og);
                div.appendChild(osvg);
            }
            addTag();
    
            //创建其他线和圆
            function addOtherTag(oattr,osvg){ 
                //线
                var og=createTag('g',{ 'style':'cursor:pointer'});
                var oline1=createTag('line',{ 'x1':oattr.x,'y1':oattr.y,'x2':dx,'y2':dy,'stroke':'#ccc'});
                var oline2=createTag('line',{ 'x1':oattr.x,'y1':oattr.x,'x2':dx,'y2':dy,'stroke':'transparent','stroke-width':'10'});
                var orect=createTag('rect',{ 'x':(oattr.x+dx)/2-10,'y':(oattr.y+dy)/2-10,'fill':'#2995FF', 'height':'20','width':'20','rx':'5'})
                var otext=createTag('text',{ 'x':(oattr.x+dx)/2,'y':(oattr.y+dy)/2+5,'text-anchor':'middle','fill':'white'})
                otext.innerHTML='?';
    
                oline2.onmouseenter=function(){ 
    
                }
                oline2.onmouseleave=function(){ 
    
                }
    
    
                og.appendChild(oline1);
                og.appendChild(oline2);
                og.appendChild(orect);
                og.appendChild(otext);
    
                osvg.appendChild(og);
    
                //圆
                var og=createTag('g',{ 'style':'cursor:pointer'});
                var ocircle=createTag('circle',{ 'cx':oattr.x,'cy':oattr.y,'r':'40', 'fill':'white','stroke':'#FF0000'})
                var otext=createTag('text',{ 'x':oattr.x,'y':oattr.y+5,'text-anchor':'middle','font-size':'10'})
                otext.innerHTML=oattr.text;
    
                ocircle.onmouseenter=function(){ 
                    startMove(this,30,40);
                }
                ocircle.onmouseleave=function(){ 
    
                }
    
    
                og.appendChild(ocircle);
                og.appendChild(otext);
    
                osvg.appendChild(og);
    
            }
    
            function startMove(obj,r1,r2)
            { 
                var nowr=r1;
                var overr=r2;
    
                obj.speed=0;
                clearInterval(obj.timer);
                //弹性公式实现特效
                obj.timer=setInterval(function(){ 
    
                    obj.speed+=(overr-nowr)/6;
                    //修改系数,系数越大,弹的波数越大，1为无限弹
                    obj.speed*=0.95;
    
                    if(Math.abs(overr-nowr)<=1 && Math.abs(obj.speed)<=1){ 
                        clearInterval(obj.timer);
                        obj.setAttribute('r',overr);
                    }else{ 
                        nowr+=obj.speed;
                        obj.setAttribute('r',nowr);
                    }
                },30)
            }
    
    
            }
        </script>
    </body>
    </html>