一个基于svg的圆形loading动画

来源：互联网发布：炫浪网络社区小说编辑：程序博客网时间：2024/05/16 20:29
前言

很多时候大家都要做一些loading动画，现在给大家带来的是用svg画出来的loading动画，稍微封装就可以使用了。
代码

<%--  Created by IntelliJ IDEA.  User: Administrator  Date: 2015/9/16  Time: 16:01  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>一个基于svg的loading控件。</title>  <script type="text/javascript" src="/static/lib/jquery-1.11.0.min.js"></script>  <script type="text/javascript" src="/static/vendor/laytpl/laytpl.js"></script></head><body><h2>原型。</h2><svg width="200" height="200">  <ellipse rx="90" ry="90" cx="100" cy="100" stroke="#f2f2f2" fill="none" stroke-width="10"></ellipse>  <path fill="none" stroke="#3daf2c" stroke-width="10" d="M100,10 A90,90 0 1 1 10,90"></path></svg><h3>控件模样。</h3><div id="container"></div><script type="text/javascript">  function SVGLoading(_opts){    var settings={      strokeWidth:10 //边框宽度。      ,strokeNormalColor:"#f2f2f2" //普通状态下边框颜色。      ,strokeActivityColor:"#3daf2c" //激活状态下边框颜色。      ,radius:80 //该圆形loading框的半径。      ,percent:47 //当前默认显示的百分比。      ,container:""    };    var appData={      width:0      ,height:0      ,rx:0      ,ry:0      ,cx:0      ,cy:0      ,stroke1:""      ,stroke2:""      ,strokeWidth:0      ,d:""    };    var _d_data={      move_point:{x:0,y:0}      ,radiusPoint:{x:0,y:0}    };    var _tpl_html='<svg width="{{d.width}}" height="{{d.height}}"><ellipse rx="{{d.rx}}" ry="{{d.ry}}" cx="{{d.cx}}" cy="{{d.cy}}" stroke="{{d.stroke1}}" fill="none" stroke-width="{{d.strokeWidth}}"></ellipse><path ui="path" fill="none" stroke="{{d.stroke2}}" stroke-width="{{d.strokeWidth}}" d="{{d.d}}"></path></svg>';    var tpl=laytpl(_tpl_html);    var _root="";    var _el_path="";    var app={      init:function(){        $.extend(settings,_opts);        var _me=this;        _me.initData();        _me.initView();      }      //--计算原始的尺寸及其他信息。      ,initData:function(){        var me=this;        appData.width=settings.radius*2;        appData.height=settings.radius*2;        appData.strokeWidth=settings.strokeWidth;        appData.rx=parseInt((settings.radius-settings.strokeWidth));        appData.ry=appData.rx;        appData.cx=parseInt(settings.radius);        appData.cy=appData.cx;        appData.stroke1=settings.strokeNormalColor;        appData.stroke2=settings.strokeActivityColor;        _d_data.move_point={          x:appData.cx          ,y:appData.cy-appData.ry        };        _d_data.radiusPoint={          x:appData.cx          ,y:appData.cy        };      }      ,initView:function(){        var me=this;        _root=$(settings.container);        appData.d=me.caculateD(settings.percent);        var html1=tpl.render(appData);        _root.html(html1);        _el_path=_root.find('[ui="path"]')[0];      }      //--计算 路径的d。      ,caculateD:function(percent){        var me=this;        var _is_big_arc=false;        var _realpercent=percent;        if(_realpercent<0){          _realpercent=0;        }        else if(_realpercent>100){          _realpercent=100;        }        if(_realpercent>50){          _is_big_arc=true;        }        var _endPoint=me.caculatePointByPercent(percent);        var _bigArc=0;        if(_is_big_arc){          _bigArc=1;        }        var _str="M"+_d_data.move_point.x+","+_d_data.move_point.y+" A"+appData.rx+","+appData.rx+" 0 "+_bigArc+" 1 "+_endPoint.x+","+_endPoint.y+"";        return _str;      }      //--计算 路径的d。      ,caculateDbyAngle:function(angle){        var me=this;        var _is_big_arc=false;        var _angle=360+angle;        _angle=_angle%360;        if(_angle>180){          _is_big_arc=true;        }        var _endPoint=me.caculatePointByAngle(_angle);        var _bigArc=0;        if(_is_big_arc){          _bigArc=1;        }        var _str="M"+_d_data.move_point.x+","+_d_data.move_point.y+" A"+appData.rx+","+appData.rx+" 0 "+_bigArc+" 1 "+_endPoint.x+","+_endPoint.y+"";        return _str;      }      //--计算当前percent的终点。      ,caculatePointByPercent:function(percent){        var _res={x:0,y:0};        /**         圆点坐标：(x0,y0)         半径：r         角度：a0         则圆上任一点为：（x1,y1）         x1   =   x0   +   r   *   cos(ao   *   3.14   /180   )         y1   =   y0   +   r   *   sin(ao   *   3.14   /180   )         * */         var Angle0=(percent/100)*360;        Angle0=(360+Angle0-90)%360;        _res.x= _d_data.radiusPoint.x+appData.rx*Math.cos(Angle0*Math.PI/180);        _res.y= _d_data.radiusPoint.y+appData.rx*Math.sin(Angle0*Math.PI/180);        return _res;      }      ,caculatePointByAngle:function(angle){        var _res={x:0,y:0};        /**         圆点坐标：(x0,y0)         半径：r         角度：a0         则圆上任一点为：（x1,y1）         x1   =   x0   +   r   *   cos(ao   *   3.14   /180   )         y1   =   y0   +   r   *   sin(ao   *   3.14   /180   )         * */        //处理一下角度问                /**                 * 为什么要这样处理?                 * 因为我们看上去认为的角度跟实际上圆角的角度有90度的差距。                 * 例如对于零度来说，在我们的圆形是 | 一条垂直的竖线就是零度了，但对于实际计算这个已经是902、度了。                 * **/        var Angle0=angle;        Angle0=360+angle-90;        Angle0=Angle0%360;        _res.x= _d_data.radiusPoint.x+appData.rx*Math.cos(Angle0*Math.PI/180);        _res.y= _d_data.radiusPoint.y+appData.rx*Math.sin(Angle0*Math.PI/180);        //--注意，这个得到的坐标是以正常的坐标系，即，左下角x，从左到右为x，从下到上为y，现在这个不是，现在的页面的坐标系是从上到下才是y轴，y轴要处理一下。        return _res;      }      ,setPercent:function(percent){        var me=this;        var _d_str=me.caculateD(percent);        //_el_path.d=_d_str;        $(_el_path).attr("d",_d_str);      }      ,setAngle:function(angle){        var me=this;        var _d_str=me.caculateDbyAngle(angle);        //_el_path.d=_d_str;        $(_el_path).attr("d",_d_str);      }    };    app.init();    var returnObject={      setPercent:function(percent){        app.setPercent(percent);      }      ,setAngle:function(angle){        app.setAngle(angle);      }    };    return returnObject;  };  var _loading={};  function InitSVGLoading(){    _loading=SVGLoading({      container:$("#container")    });  };  InitSVGLoading();  var _current_percent=0; setInterval(function(){    _loading.setPercent(_current_percent);    _current_percent=_current_percent+0.1;    _current_percent=_current_percent%100;  },10);</script></body></html>
jquery.js和laytpl.js请在网上下载。
效果

这里写图片描述
兼容性

大家别执着于兼容性了，ie6-9都恐怕没办法运行，但是，ios，安卓【假如不是古董级别】，chrome，safari，firefox都可以运行，作为一名开发html5的前端，这个兼容性还不够么。
0 0