js svg语音波动动画_SVG实现环形进度条的原理

之前在项目中遇到一个环形进度条的需求，要求能实时更新进度，脑海中瞬间便蹦出css，svg，canvas3中方案，对于3种方案个人更偏向于svg，用法简单，代码量也很少，同时也便于实时控制。具体效果如下图：

代码非常简单：

"150px" height=    <circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/>    <circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px"  stroke-dasharray="471px" />svg>

为了便于演示，我们先用css动画控制：

svg {    transform: rotate(-90deg);}.progress {    animation: rotate 1500ms linear both;}@keyframes rotate {    from {        stroke-dashoffset: 471px;    }    to {        stroke-dashoffset: 0px;    }}

实现原理

实现原理非常简单，就是应用svg的stroke-dashoffset和stroke-dasharray属性。stroke-dasharray官方解释为可控制用来描边的点划线的图案范式，即定义虚线每段长度即虚线间间隔，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。stroke-dashoffset标识的是整个路径的偏移值。通过控制虚线的间隔与偏移值，便可以行程各种各样的线条动画，当然我们还可以通过js控制，如下：

let path = document.querySelector('#path');// 可获取路径的长度let len = path.getTotalLength();path.style.cssText = `stroke-dasharray:"${number}"`;

本文完~

js svg语音波动动画_SVG实现环形进度条的原理相关推荐

js svg语音波动动画_整理一些有趣的svg动画
原因原因很简单,我不想成为一个api前端工程师,想能够多学一点.偶尔的喜欢做一些html可能难以完成的效果,去年用canvas写了一份简单的gant图,感觉还不错.后来画流程图的时候搜索各大网站发现 ...
js svg语音波动动画_让动效更酷炫！4 个常见且常用的 SVG 交互动画方法
本文介绍了 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互动画的原理和简单方法. 优秀的人机交互和舒适合理的动画,一直是 UX 设计师孜孜不倦追求的目标.但 UX 设计师每天都遇到能做出效 ...
js svg语音波动动画_11 个非常受欢迎的 JavaScript 动画库，值得学习！
1.Three.js 超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL.这个库提供了. .CSS3D 和 WebGL渲染器,让我们在设备和浏览器之间创建丰富的 ...
canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"><p>抱歉, ...
css锥形渐变结合SVG实现环形进度条
css锥形渐变结合SVG实现环形进度条准备: 锥形渐变 MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gra ...
用svg实现一个环形进度条
svg实现环形进度条需要用到的知识: 1.会使用path的d属性画一个圆环 //用svg的path元素的A命令画圆<pathd="M cx cym 0 -r a r r 0 1 0 0 ...
CircleProgressBar 带载入动画的环形进度条
CircleProgressBar 项目地址:AlexMofer/CircleProgressBar 带载入动画的环形进度条,可高度配置,支持配置成表盘. 预览要求 minSdkVersion ...
肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！
文章目录一.圆形加载动画二.上下跳动的圆球加载动画三.3D立体加载动画四.饼图加载动画五.多色圆点波动效果的加载动画六.制作顺时针放大的圆圈加载动画七.制作小圆圈轮流放大的加载动画八. ...
vue 环形进度条组件封装
子组件circle: <template><div :style="svgStyle"><svg :style="svgStyle" ...

js svg语音波动动画_SVG实现环形进度条的原理

实现原理

js svg语音波动动画_SVG实现环形进度条的原理相关推荐

最新文章

热门文章