一个基于svg的圆形loading动画

最新推荐文章于 2022-04-04 20:28:40 发布

码农下的天桥

最新推荐文章于 2022-04-04 20:28:40 发布

阅读量4.4k

点赞数

分类专栏：前端 web开发文章标签： svg loading动画前端

本文链接：https://blog.csdn.net/cdnight/article/details/48522495

版权

前端同时被 2 个专栏收录

243 篇文章 2 订阅

订阅专栏

web开发

142 篇文章 0 订阅

订阅专栏

前言

很多时候大家都要做一些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

收藏

觉得还不错? 一键收藏
0
评论
一个基于svg的圆形loading动画

前言很多时候大家都要做一些loading动画，现在给大家带来的是用svg画出来的loading动画，稍微封装就可以使用了。代码<%-- Created by IntelliJ IDEA. User: Administrator Date: 2015/9/16 Time: 16:01 To change this template use File | Settings | Fil
复制链接

扫一扫

专栏目录