正文 

当前位置： 首页 > 技术 > java教程

svg圆环进度动画(代码片段)

everlose everlose     2023-04-11     626

关键词：

简介

近日业务需要，特来钻研一阵，最后选型svg技术实现，因为方便。

实现步骤

一、先画一圆环

<svg xmlns="http://www.w3.org/2000/svg" height="110" width="110" viewBox="0 0 110 110">
    <circle cx="50%" cy="50%" r="50" stroke-width="10" stroke="#F2F2F2" fill="none"></circle>
</svg>

定义让外层容器为宽高110px的正方形，并且定义在容器的中心处（cx="50%"" cy="50%"）画半径为50px的圆（r="50"），圆的内容不着色（fill="none"）。描边为10px，着描边色为灰色（stroke-width="10" stroke="#F2F2F2"）

技术图片

二、再来一层绿色圆环叠加

<svg xmlns="http://www.w3.org/2000/svg" height="110" width="110" viewBox="0 0 110 110">
    <circle cx="50%" cy="50%" r="50" stroke-width="10" stroke="#F2F2F2" fill="none"></circle>
    <circle id="ring" cx="50%" cy="50%" r="50" stroke-width="10" stroke="green" fill="none"
    transform="rotate(-90 55 55)"
    stroke-dasharray="100, 314"></circle>
</svg>

下面的 circle 着描边为绿，并且写上了 stroke-dasharray ，此属性参数第一个数值表示dash，这里代表覆盖范围，后一个数字表示gap长度默认为circle的周长314。此外tranform属性的作用是将圆环从0点位置开始覆盖，不写此属性则从3点位置开始覆盖（rotate第一个参数为角度，第二个和第三个参数为旋转中心，这里为容器的中心）。

技术图片

三、给圆环加入渐变色

<svg xmlns="http://www.w3.org/2000/svg" height="110" width="110" viewBox="0 0 110 110">
    <linearGradient id="svg-gradient" gradientUnits="userSpaceOnUse" x1="100%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" style="stop-color:yellow"/>
        <stop offset="100%" style="stop-color:green"/>
    </linearGradient>
    <circle cx="50%" cy="50%" r="50" stroke-width="10" stroke="#F2F2F2" fill="none"></circle>
    <circle id="ring" cx="50%" cy="50%" r="50" stroke-width="10" fill="none"
    stroke="url(#svg-gradient)" 
    transform="rotate(-90 55 55)"
    stroke-dasharray="200, 314"></circle>
</svg>

id为ring的 circle 改变了stroke属性为 url(#svg-gradient) ，意为以上面的 linearGradient 背景，以起点黄到终点绿渐变。

技术图片

四、加入动画

<style>
circle 
    -webkit-transition: stroke-dasharray 2s;
    transition: stroke-dasharray 2s;

</style>

设置css动画持续2s

<svg xmlns="http://www.w3.org/2000/svg" height="110" width="110" viewBox="0 0 110 110">
    <linearGradient id="svg-gradient" gradientUnits="userSpaceOnUse" x1="100%" y1="100%" x2="0" y2="0">
        <stop offset="0%" style="stop-color:yellow"/>
        <stop offset="100%" style="stop-color:green"/>
    </linearGradient>
    <circle cx="50%" cy="50%" r="50" stroke-width="10" stroke="#F2F2F2" fill="none"></circle>
    <circle id="ring" cx="50%" cy="50%" r="50" stroke-width="10" fill="none"
    stroke="url(#svg-gradient)" 
    transform="rotate(-90 55 55)"
    stroke-dasharray="0, 314"></circle>
</svg>

id为ring的 circle 改变了 stroke-dasharray 使其 dash 参数初始化为0。

var targetRing = document.getElementById('ring');
var totalLength = targetRing.getTotalLength();

targetRing.style.strokeDasharray = totalLength + ', ' + totalLength;

设置改变 circle 的 stroke-dasharray，0为初始，而周长314为一整个圆（直径为100可算得）。

技术图片

注意

如果改变了圆环尺寸，以下需要更改

  • svg 容器的 width 和 height，还有 viewBox
  • 两个 circle 的 r 值 还有 stroke-width值
  • #ring 的 transform=rotate() 里的后两个参数为容器的中心坐标
  • #ring 的 stroke-dasharray 里的最后一个参数当为圆的周长

参考

用svg实现一个环形进度条(代码片段)

svg实现环形进度条需要用到的知识：1、会使用path的d属性画一个圆环2、熟悉stroke,stroke-linecap,stroke-width,stroke-dasharray、stroke-dashoffset 话不多说，直接上代码<divstyle="width:200px;height:200px;"><svgviewBox="00100100">&l 查看详情

css使用svg和css动画尝试chrome风格的进度指示器(代码片段)

查看详情

svg的圆形进度条(代码片段)

 目前发现svg实现一些动画效果是比较高效简单的。如圆形进度条，只要会stroke-dasharray与stroke-dashoffset属性基本就可以实现，而且美观。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title 查看详情

小tip:使用svg寥寥数行实现圆环loading进度效果

二、正文设计师设计了一个图片上传圆环loading进度效果。如下截图：首先，CSS3是可以实现的，以前写过一篇转大饼的文章：“CSS3实现鸡蛋饼饼状图loading等待转转转”。原理跟这个一模一样，两个半区的矩形，然后不同时机巧... 查看详情

svg画圆环(代码片段)

之前我已经分享了一篇css画圆环，为啥今天还要分享一篇svg画圆环呢?原因是：css画圆环在部分ipone手机会有bug，最大张角为90°，所以圆环会有白色的间隙。好了，开始代码展示：html：<svgclass="c-c-c">　　　　　<!--score为... 查看详情

css奇技淫巧box-shadow实现圆环进度条(代码片段)

CSS奇技淫巧Box-shadow实现圆环进度条文章目录CSS奇技淫巧Box-shadow实现圆环进度条一、Box-shadow圆环进度条二、效果预览三、原理刨析四、实际应用五、总结六、参考资料💘七、推荐博文🍗一、Box-shadow圆环进度条实现圆环... 查看详情

圆环进度条两种实现方式(代码片段)

先看图效果图：这边UI的设计图长这样  一个圆环的进度展示，这个圆环上开始位置是齐口的，终点圆口，并且有一个圆；列举了两种实现方式：第一种纯的CSS实现；原理是叠加和旋转而成。缺点在某... 查看详情

android自定义view和属性动画完美结合,创造出酷炫圆环动画,带标尺和进度

...的博客】Android自定义View和属性动画完美结合,创造出酷炫圆环动画,带标尺和进度无意中，在看了【Android自定义View实战】之仿QQ运动步数圆弧及动画，Dylan计步中的控件S 查看详情

css奇技淫巧box-shadow实现圆环进度条(代码片段)

CSS奇技淫巧Box-shadow实现圆环进度条文章目录CSS奇技淫巧Box-shadow实现圆环进度条一、Box-shadow圆环进度条二、效果预览三、原理刨析四、实际应用五、总结六、参考资料💘七、推荐博文🍗一、Box-shadow圆环进度条实现圆环... 查看详情

ycprogress自定义百分比进度条(代码片段)

目录介绍1.本库优势亮点2.使用介绍2.1圆环百分比进度条2.2直线百分比进度条2.3仿杀毒类型百分比进度条3.注意要点4.效果展示5.其他介绍1.本库优势亮点圆环百分比进度条简便且小巧，支持设置多种属性。可以设置内圆和外圆的颜... 查看详情

svg动画精髓(代码片段)

TL;DR本文主要是讲解关于SVG的一些高级动画特效，比如SVG动画标签，图形渐变，路径动画，线条动画，SVG裁剪等。例如：路径动画图形渐变：线条动画：以及，相关的动画的矩阵知识，这个也是现在CSS动画里面最重要，同时也是... 查看详情

scss动画svg徽标(代码片段)

查看详情

scss动画svg头像(代码片段)

查看详情

javascript动画svg的路径(代码片段)

查看详情

svg文字描边动画(代码片段)

svg动画在网页中是经常见到的，svg动画使得网页看起来清新美观任何不规则图形都可以由svg绘制完成，当然也包括文字，文字本身就可以看作一个不规则图形??还是按以前的流程，开始放代码前，先看效果：很酷炫有木有？！！... 查看详情

markdown手写动画（svg+css）(代码片段)

查看详情

svg路径蒙版动画(代码片段)

 svg路径蒙版动画，是比较实用的一种动画效果，能够绘制如下图所示的动画。    接下来细说这样的动画是如何做成的:1.准备工作2.SVG路径动画3.SVG路径蒙版动画4.复杂图形的编辑技巧  1.准备工作首先通... 查看详情

利用圆圈轮廓面积求取圆环半径：cv2.findcontours,contourarea(代码片段)

简介：利用圆环的面积反向计算圆的半径，可以获得更加稳定的圆的半径。对于标准模板在扫描仪上的移动，可以看到对应的测量得到的结果变化规律。下面对于造成这样变化进行初步分析。关键词：抑菌圈测量... 查看详情