从一个圆环进度功能来学习SVG

简介: 从一个圆环进度功能来学习SVG

从画方块开始


svg不设置宽高时默认宽度是 300px ,默认高度是 150px

<template>
    <svg class="box" >
    </svg>
</template>
<style scoped>
.box {
    border: 1px solid red;
}
</style>


image.png


也可以在 svg上添加 width 和 height两个属性设置宽高,默认是px,也可以带其他单位

<svg width="100" height="100">
</svg>


image.png


svg就相当于一个画布,画布的大小设置好了,我们就可以在上面作画了,先画一个圆吧


画个圆


圆使用 <circle> 标签,默认填充色是黑色,当只设置半径r时,渲染出来的圆就是黑色的圆

<svg width="100" height="100"  class="box" >
    <circle
        r="50"
    />
</svg>


image.png


此时我们可以看到圆的中心点在左上角,所以只显示了1/4,需要给圆一个位置 cx和cy,我想要把圆的背景变成红色,显得喜庆,就需要用到fill属性,进行填充颜色

<svg width="100" height="100" >
    <circle
        cx="50"
        cy="50"
        r="50"
        fill='red'
    />
</svg>


image.png


圆环


stroke是用来描边填充的颜色,和border类似stroke-width相当于描边的宽度,但是它不属于半径

可以用这两个属性画一个圆环

<svg width="100" height="100" class="box">
    <circle
        cx="50"
        cy="50"
        r="45"
        fill='none'
        stroke="red"
        stroke-width="10"
        />
</svg>


image.png


stroke-width设置的宽度,一半在圆内,一半在圆外


image.png


动起来


圆环进度和倒计时,主要要依靠stroke-dasharray这个属性来实现


stroke-dasharray


stroke-dasharray设置实线和间隔的距离

stroke-dasharray: 20, 5; 表示按照实线为 20,间隔为 5 的排列重复下去

<svg width="200" height="200" >
  <circle
    cx="100"
    cy="100"
    r="50"
    fill='none'
    stroke="red"
    stroke-width="10"
    stroke-dasharray="20, 5"
  />
</svg>


image.png


当间隔等于圆的周长,实线从0开始增加

<svg width="200" height="200" >
    <circle
        cx="100"
        cy="100"
        r="50"
        fill="green"
        stroke-width="10"
        stroke="red"
        stroke-dasharray="29.1719, 314.1592653589793" 
    />
</svg>


image.png


开始实现动态加载


常见的圆环进度通常都是默认两种颜色,一种是初始值,另一种是加载进度的颜色,我们可以使用两个圆,把他们的半径和位置等属性设置相同,只改变两个圆的颜色

  • 第一个circle设置边框颜色设置为灰色
  • 第二个circle设置为红色,好区分
<svg width="200" height="200" >
    <circle
        cx="100"
        cy="100"
        r="50"
        fill="none"
        stroke="#808080"
        stroke-width="10"
    />
    <circle
        cx="100"
        cy="100"
        r="50"
        fill="none"
        stroke-width="10"
        stroke="red"
        stroke-dasharray="20, 314.1592653589793" 
    />
</svg>


image.png


基础框架已经搭建好了,现在要让他动起来,我们可以用计算属性设置红色的实线长度

圆周长是 2πr这就是它的间隔,然后根据时间计算实线的距离

<template>
    <svg width="200" height="200" >
        <circle
            cx="100"
            cy="100"
            r="50"
            fill="none"
            stroke="#808080"
            stroke-width="10"
        />
        <circle
            cx="100"
            cy="100"
            r="50"
            fill="none"
            stroke-width="10"
            :style="{
                stroke:'red',
                strokeDasharray: `${currentLen} ${circleLength}`
            }"
        />
    </svg>
</template>
<script setup>
import { ref } from 'vue'
// 圆周长 2πr
const circleLength = 2 * Math.PI * 50
const time = 6 // 倒计时 6秒
let currentT = ref(0) // 当前时间
let currentLen = ref(0) // 当前长度
let timeId = setInterval(() => {
    currentT.value++
    // 计算长度
    currentLen.value = currentT.value / time * circleLength
    if(currentT.value>time) {
        clearInterval(timeId)
    }
}, 1000);
</script>


image.png


虽然说可以实现效果,但是动画太生硬,接下来可以使用动画属性把动效变顺畅一些

在style里添加transition属性来增加动画效果

:style="{
    stroke:'red',
    strokeDasharray: `${currentLen} ${circleLength}`,
    transition: 'all 1s linear',
}"


image.png


如果觉得圆环线头的类型不太好看,可以使用stroke-linecap属性来修改


image.png


:style="{
    stroke:'red',
    strokeDasharray: `${currentLen} ${circleLength}`,
    transition: 'all 1s linear',
    strokeLinecap:'round',
}"


image.png


至此一个简化版的圆环进度的主要功能就已经实现了,剩下的就是一些边边角角可以自由发挥了



目录
相关文章
|
11月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
JavaScript
vscode——如何调试typescript
vscode——如何调试typescript
247 4
|
10月前
|
缓存 监控 Java
Elasticsearch集群JVM调优
Elasticsearch集群JVM调优
324 5
|
11月前
|
机器学习/深度学习 人工智能 安全
【大语言模型-论文精读】用于医疗领域摘要任务的大型语言模型评估综述(下)
【大语言模型-论文精读】用于医疗领域摘要任务的大型语言模型评估综述(下)
205 1
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
1564 0
|
关系型数据库 MySQL Linux
本地虚拟机centos7通过docker安装主从mysql5.7.21
本地虚拟机centos7通过docker安装主从mysql5.7.21
295 0
|
应用服务中间件 开发工具 nginx
C++文件服务器项目—FastCGI—4(一)
C++文件服务器项目—FastCGI—4(一)
330 0
|
SQL Oracle 关系型数据库
Oracle-动态性能视图解读
Oracle-动态性能视图解读
304 0
|
JavaScript 前端开发
记一次vscode踩坑记录:"TypeScript 语言服务在其启动后已中止 5 次。将不会重启该服务。"
记一次vscode踩坑记录:"TypeScript 语言服务在其启动后已中止 5 次。将不会重启该服务。"
记一次vscode踩坑记录:"TypeScript 语言服务在其启动后已中止 5 次。将不会重启该服务。"
|
小程序 JavaScript 前端开发
微信小程序框架介绍
微信小程序框架介绍