本次案例主要使用了svg的三个元素,分别为circletextpath,关于svg的介绍大家可以看MDN上的相关教程,传送门


由于svg可以写到HTML中,所以这里我们就可以很方便的做进度条加载动画啦,这次案例以vue来做数据交互

svg的viewBox

viewBox属性定义了画布上可以显示的区域,viewBox有4个值,值1为svg窗口起点显示的x坐标,值2位svg窗口起点的y坐标, 后面的两个分别为显示的大小; 平常可以通过后面这两个值对svg图形进行放大和缩小, 前面的两个值进行窗口位置的变换

在demo中为了方便计算svg元素的中心,我设置为(0, 0) 即圆的坐标方程满足 x^2 + y^2 = r^2

circle元素

circle元素在svg中可以画一个圆,主要属性为cx(圆心x坐标)、cy(圆心y左边)、r(圆的半径)

text元素

svg中显示字体的元素,text-anchor、dominant-baseline分别可以设置字体的左右、上线对齐方式

path元素

svg中所有的基本元素都可以通过path路径画出来,该元素只有一个属性d,动画的效果就是通过不断改变d的值来达到的;

在这里只需要掌握d的A命令即可,传送门


效果图以及代码


<div id="app">
<svg width="100" height="100" viewBox="-50 -50 100 100">
<circle cx="0" cy="0" stroke-width="6" fill="none" stroke="#ddd" :r="r"/>
<path :d="d" fill="none" stroke-width="6" stroke="#369"/>
<text text-anchor="middle" dominant-baseline="middle">{{ ratio }}%</text>
</svg>
</div>

new Vue({
el: '#app',
data: {
ratio: 1,
r: 47
},
computed: {
d() {
const { ratio } = this
return this.getD(ratio)
}
},
methods: {
getD(ratio) {
if (ratio >= 100) {
ratio = 99.999
}
const angle = Math.PI / 50 * ratio
const r = this.r
const x = r * Math.cos(angle)
const y = -r * Math.sin(angle)
const isBigAngle = Number(ratio > 50)
return `M 47 0 A 47 47 0 ${isBigAngle} 0 ${x} ${y}`
}
},
mounted() {
let timer = setInterval(() => {
if (this.ratio > 100) {
this.ratio = 100
clearInterval(timer)
timer = null
return
}
this.ratio += 1
}, 16)
}
})

ps:第一次写博客,发现表达能力真的好差;

如何用SVG写一个环形进度条以及动画的更多相关文章

  1. 用svg实现一个环形进度条

    svg实现环形进度条需要用到的知识: 1.会使用path的d属性画一个圆环 //用svg的path元素的A命令画圆 <path d=" M cx cy m 0 -r a r r 0 1 ...

  2. 用初中数学知识撸一个canvas环形进度条

    周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...

  3. 【css】如何实现环形进度条

    最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...

  4. [Xcode 实际操作]四、常用控件-(12)环形进度条控件的使用

    目录:[Swift]Xcode实际操作 本文将演示环形进度条控件的使用. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class Vi ...

  5. [Swift通天遁地]一、超级工具-(2)制作美观大方的环形进度条

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. 【常见】CSS3进度条Loading动画

    现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...

  7. 基于svg的环形进度条

    其实需求是这么一个基于日期的环形进度条,开始用css3写了一下感觉太麻烦了,于是抽了点时间用svg画了一个. 不多说 上代码: css: <style> circle { -webkit- ...

  8. 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  9. iOS带动画的环形进度条(进度条和数字同步)

    本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个 方法直接看代码 为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> ...

随机推荐

  1. node post和get请求原理

    重要:GET和POST请求他们都是上行请求,都是把数据从浏览器带向服务器的方式, GET 请求实际上就是识别URL中的querystring部分POST请求,一般用来发送大量的内容,此时node非常害 ...

  2. PostgreSQL的HA解决方案-1主从和备份(master/slave and backup)

    一.部署说明 1.1 实施环境 本文档实验环境如下: PGSQL主机: 192.168.1.45 PGSQL备机: 192.168.1.50 软件和系统版本 Pgsql 版本: pgsql 9.2.4 ...

  3. THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js - ASCII Ef ...

  4. (转)基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

    http://www.cnblogs.com/wuhuacong/p/4761637.html 在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JST ...

  5. kerberos认证原理---讲的非常细致,易懂

    前几天在给人解释Windows是如何通过Kerberos进行Authentication的时候,讲了半天也别把那位老兄讲明白,还差点把自己给绕进去.后来想想原因有以下两点:对于一个没有完全不了解Ker ...

  6. Express+Nodejs 下的登录拦截实现

    Express+Nodejs 下的登录拦截实现 利用商城举例,在商城中没有登录之前,可以看商品列表.详情.登录或者注册都可以,但是购买的时候是不行的,那么这个功能在Node后台中是怎么实现的呢,这个功 ...

  7. cocos ios Label组件问题

    软件:cocos creator v1.9.0 开发的过程中,一直在web上预览,Label组件显示一直没问题.在打包到ios上时,出现问题了: Label组件: 当我们缩小字体,发现没问题了,当我们 ...

  8. vue 上滑加载更多

    移动端网页的上滑加载更多,其实就是滑动+分页的实现. <template> <div> <p class="footer-text">--{{f ...

  9. Apache_安装

    1.下载安装包 网址:https://www.apachelounge.com/download/,下载你需要的安装包 2.解压文件到指定安装目录 3.修改配置文件 使用文本编辑器打开配置文件 con ...

  10. [系统资源]port range

    ip_local_port_range 端口范围 sysctl Linux中有限定端口的使用范围,如果我要为我的程序预留某些端口,那么我需要控制这个端口范围, 本文主要描述如何去修改端口范围. /pr ...