经验分享程序开发文档资料数据资源其它资源

html5 svg圆形进度统计动画特效

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5 svg圆形进度统计动画特效 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

html5 svg圆形进度统计动画特效

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>html5 svg圆形进度统计动画特效</title>
<link rel="stylesheet" href="style.css" />
<!--<script src="main.js" type="text/javascript" charset="utf-8"></script> -->
<script>
window.onload=function(){
	var speed=1/30*Math.PI;
	var Q=5/3*Math.PI;
	var Q2=2/3*Math.PI;
	var Q3=4/3*Math.PI;
	var Q4=6/7*Math.PI;
	var time=20;
	createQuaCircle("svg1");
	doAnimation(Q,"svg1",speed,time);
	showText("svg1","体重","18");
	doAnimation(Q2,"svg2",speed,time);
	showText("svg2","胸围","18");
	doAnimation(Q3,"svg3",speed,time);
	showText("svg3","腰围","18");
	doAnimation(Q4,"svg4",speed,time);
	showText("svg4","大腿围","18");
	//创建1/4半圆
}
function doAnimation(Q,id,speed,time){
	  var oSvg=document.getElementById(id);
	  var oSvgWidth=parseInt((oSvg.curentStyle?oSvg.curentStyle:window.getComputedStyle(oSvg,null)).width);
	  oSvg.setAttribute("height",oSvgWidth);
	  //创建use元素的组合
	  var bgCircleG=document.createElementNS("http://www.w3.org/2000/svg","g");
	  bgCircleG.setAttribute("transform","translate("+0.5*oSvgWidth+","+0.5*oSvgWidth+")");
	  createGradientBg(bgCircleG,oSvg,oSvgWidth);
	  var currentAngle=0;
	  var rotateRirection;  //旋转的方向如果Q<=Math.PI rotateRirection 为1 大的弧度，如果Q>Math.PI rotateRirection为0 小的弧度
	  if (Q<=0) {
		//大圆
		var smallCircle=document.createElementNS("http://www.w3.org/2000/svg","circle");
		smallCircle.setAttribute("cx",0);
		smallCircle.setAttribute("cy",0);
		smallCircle.setAttribute("r",0.3*oSvgWidth+1);
		smallCircle.setAttribute("fill","#e5e5e5");
		bgCircleG.appendChild(smallCircle);
		//小圆
		drawSmallCircle(id,bgCircleG,oSvgWidth);
	  }
	  else if (Q>0&&Q<=2*Math.PI) {
		rotateRirection=judgeRirection(currentAngle);
		currentAngle+=speed;
		var tId=null;
		annimationCircle(id,bgCircleG,currentAngle,oSvgWidth,rotateRirection);
		tId=setInterval(function(){
				if (currentAngle<=Q) {
					rotateRirection=judgeRirection(currentAngle);
					annimationCircle(id,bgCircleG,currentAngle,oSvgWidth,rotateRirection);
					currentAngle+=speed;
					if (currentAngle>=Q) {
						currentAngle=Q;
						if (Q>Math.PI) {
						rotateRirection=judgeRirection(currentAngle);
						}
						annimationCircle(id,bgCircleG,currentAngle,oSvgWidth,rotateRirection);
						clearTimeout(tId);

					};
				}
				else {
					currentAngle=Q;
					rotateRirection=judgeRirection(currentAngle);
					annimationCircle(id,bgCircleG,currentAngle,oSvgWidth,rotateRirection);
					clearTimeout(tId);
			
			}
		},time);
	  }
	  else if(Q>2*Math.PI){
		drawSmallCircle(id,bgCircleG,oSvgWidth);
	  }
	  
}
function createQuaCircle(id){
		var oSvg=document.getElementById(id);
		var oSvgWidth=parseInt((oSvg.curentStyle?oSvg.curentStyle:window.getComputedStyle(oSvg,null)).width);
		var cr1=cr2=0.5*oSvgWidth;
		var oPathElement=document.createElementNS("http://www.w3.org/2000/svg","path");
		var d="M0,0"+" L 0,"+-0.3*oSvgWidth+" A"+0.3*oSvgWidth+","+0.3*oSvgWidth+" 0 0,1 "+0.3*oSvgWidth+",0 z";
		oPathElement.id="halfCircle";
		oPathElement.setAttribute("d",d);
		var omydefs=document.getElementById("mydefs");
		omydefs.appendChild(oPathElement);
}
	function createGradientBg(bgCircleG,oSvg){
		
		//创建第一个use元素
		var bgCircle1=document.createElementNS("http://www.w3.org/2000/svg","use");
		bgCircle1.setAttribute("fill","url(#lightGreenGradient)");
		bgCircle1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#halfCircle");
		//创建第2个use元素并且旋转90度
		var bgCircle2=document.createElementNS("http://www.w3.org/2000/svg","use");
		bgCircle2.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#halfCircle");
		bgCircle2.setAttribute("fill","url(#greenDeepGradient)");
		bgCircle2.setAttribute("transform","rotate(90)");
		//创建第3个use元素并且旋转180度
		var bgCircle3=document.createElementNS("http://www.w3.org/2000/svg","use");
		bgCircle3.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#halfCircle");
		bgCircle3.setAttribute("fill","url(#greenLightRedGradient)");
		bgCircle3.setAttribute("transform","rotate(180)");
		//创建第4个use元素并且旋转270度
		var bgCircle4=document.createElementNS("http://www.w3.org/2000/svg","use");
		bgCircle4.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#halfCircle");
		bgCircle4.setAttribute("fill","url(#LightRedGradient)");
		bgCircle4.setAttribute("transform","rotate(270)");
		//将use元素追加到组合中
		bgCircleG.appendChild(bgCircle1);
		bgCircleG.appendChild(bgCircle2);
		bgCircleG.appendChild(bgCircle3);
		bgCircleG.appendChild(bgCircle4);
		oSvg.appendChild(bgCircleG);
		}
	  //动态圆遮挡边用灰色填充
function annimationCircle(id,bgCircleG,Q,oSvgWidth,rotateRirection){
		if (oPathElement2=document.getElementById("half"+id)) {
			bgCircleG.removeChild(oPathElement2);
		};
		var oPathElement2=document.createElementNS("http://www.w3.org/2000/svg","path");
		var d="M0,0"+" L"+(0.3*oSvgWidth)*Math.sin(Q)+","+(-(0.3*oSvgWidth)*Math.cos(Q))+" A"+(0.3*oSvgWidth)+","+(0.3*oSvgWidth)+" 0 "+rotateRirection+",1 "+"0 "+(-0.3*oSvgWidth)+" z";
		oPathElement2.id="half"+id;
		oPathElement2.setAttribute("d",d); 
		oPathElement2.setAttribute("stroke","#e5e5e5");
		oPathElement2.setAttribute("fill","#e5e5e5");
		bgCircleG.appendChild(oPathElement2);
		drawSmallCircle(id,bgCircleG,oSvgWidth);
  }
	// 圆弧中比较小的圆用白色填充
function drawSmallCircle(id,bgCircleG,oSvgWidth){
		if (smallCircle2=document.getElementById("smallCircle"+id)) {
			bgCircleG.removeChild(smallCircle2);
		};
		var smallCircle=document.createElementNS("http://www.w3.org/2000/svg","circle");
		smallCircle.id="smallCircle"+id;
		smallCircle.setAttribute("cx",0);
		smallCircle.setAttribute("cy",0);
		smallCircle.setAttribute("r",0.25*oSvgWidth+1);
		smallCircle.setAttribute("stroke","#FFF");
		smallCircle.setAttribute("stroke-width","4");
		smallCircle.setAttribute("fill","#FFF");
		bgCircleG.appendChild(smallCircle);
}
  //rotateRirection 旋转的方向如果<=Math.PI rotateRirection 为1 大的弧度，如果>Math.PI rotateRirection为0 小的弧度
function judgeRirection(angle){
		if (angle<=Math.PI) {
				rotateRirection=1;
		}
		else {
				rotateRirection=0;
		}
		return rotateRirection;
}
function showText(id,value,fontSize){
	var oSvg=document.getElementById(id);
	var oSvgWidth=parseInt((oSvg.curentStyle?oSvg.curentStyle:window.getComputedStyle(oSvg,null)).width);
	if (oSvgWidth<480) {
		fontSize=0.8*parseInt(fontSize);
	};
	var otext=document.createElementNS("http://www.w3.org/2000/svg","text");
	var oTspan=document.createElementNS("http://www.w3.org/2000/svg","tspan");
	otext.setAttribute("x",parseInt(0.5*oSvgWidth));
	otext.setAttribute("y",parseInt(0.5*oSvgWidth));
	otext.setAttribute("font-size",fontSize);
	otext.setAttribute("z-index",99999);
	otext.setAttribute("font-weight","500");
	otext.setAttribute("font-family","微软雅黑");
	otext.setAttribute("text-anchor","middle");
	otext.setAttribute("dominant-baseline","middle");
	otext.setAttribute("fill","#38c19d");
	var oTextCon=document.createTextNode(value);
	otext.appendChild(oTextCon);
	oSvg.appendChild(otext);
}
/*	window.onresize=function(){
	var Q=5/3*Math.PI;
	var Q2=2/3*Math.PI;
	var Q3=4/3*Math.PI;
	var Q4=6/7*Math.PI;
	var oSvg=document.getElementById("svg1");
	var oSvgWidth=parseInt((oSvg.curentStyle?oSvg.curentStyle:window.getComputedStyle(oSvg,null)).width);
	var oPath=document.getElementById("halfCircle");
	var d="M0,0"+" L 0,"+-0.3*oSvgWidth+" A"+0.3*oSvgWidth+","+0.3*oSvgWidth+" 0 0,1 "+0.3*oSvgWidth+",0 z";
	oPath.setAttribute("d",d);
	var g=oSvg.getElementsByTagNameNS("http://www.w3.org/2000/svg","g");
	var rotateRirection=judgeRirection(Q);
	annimationCircle("svg1",g,Q,oSvgWidth,rotateRirection);
}*/
</script>
</head>

<body>
<div class="wrap clearfix" id="wrap">
	<svg  id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<defs id="mydefs">
			<linearGradient id="lightGreenGradient" x1="0%" y1="0%" x2="100%" y2="0%">
				<stop offset="0%" stop-color="#38c19d" stop-opacity="0.2"></stop>
				<stop offset="100%" stop-color="#38c19d" stop-opacity="0.5"></stop>
			</linearGradient>
			<linearGradient id="greenDeepGradient" x1="0%" y1="0%" x2="100%" y2="100%">
				<stop offset="0%" stop-color="#38c19d" stop-opacity="0.5"></stop>
				<stop offset="100%" stop-color="#38c19d" stop-opacity="1"></stop>
			</linearGradient>
			<linearGradient id="greenLightRedGradient" x1="0%" y1="0%" x2="100%" y2="100%">
				<stop offset="0%" stop-color="#38c19d" stop-opacity="1"></stop>
				<stop offset="100%" stop-color="#ff0000" stop-opacity="0.5"></stop>
			</linearGradient>
			<linearGradient id="LightRedGradient" x1="0%" y1="0%" x2="100%" y2="100%">
				<stop offset="0%" stop-color="#ff0000" stop-opacity="0.5"></stop>
				<stop offset="100%" stop-color="#ff0000" stop-opacity="1"></stop>
			</linearGradient>
		</defs>
	</svg>
	 <svg  id="svg2" version="1.1" xmlns="http://www.w3.org/2000/svg">
	 </svg>
	 <svg  id="svg3" version="1.1" xmlns="http://www.w3.org/2000/svg">
	 </svg>
	 <svg  id="svg4" version="1.1" xmlns="http://www.w3.org/2000/svg">
	 </svg>
  </div>
</body>
</html>

CSS代码(style.css):

*{margin:0}
.wrap{width:100%;max-width:720px;margin:0 auto}
.wrap .col4{width:33%;float:left;box-sizing:border-box}
.wrap svg{width:33%;float:left}
.clearfix:after{content:"";clear:both;display:block;overflow:none;height:0}
.clearfix{zoom:1}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
2.78 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
2.78 KB
立即下载
强月瑗静
了解
打赏作者 鼓励作者
html5特效
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章