zoukankan      html  css  js  c++  java
  • 如何用SVG写一个环形进度条以及动画

    本次案例主要使用了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:第一次写博客,发现表达能力真的好差;

  • 相关阅读:
    Java实现提取拼音首字母
    Java实现网格中移动字母
    Java实现网格中移动字母
    Java实现网格中移动字母
    SQL语句:Group By总结
    Maven学习 使用Nexus搭建Maven私服(转)
    CentOS7 搭建Git服务器(转)
    tomcat调优的几个方面(转)
    windows越用越卡怎么办?(转)
    Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】
  • 原文地址:https://www.cnblogs.com/songbw/p/10950684.html
Copyright © 2011-2022 走看看