Skip to content

Latest commit

 

History

History
161 lines (143 loc) · 5.13 KB

7.md

File metadata and controls

161 lines (143 loc) · 5.13 KB
Raw

进度条组件(圆形)

迷你播放器上的控制按钮上有一个圆形的进度条，这个进度条这里使用 svg来做。

基础代码如下:

<template>
  <div class="progress-circle">
    <svg width="32" height="32" viewBox="0 0 100 100" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
      <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"></circle>
      <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent"
              stroke-dasharray="100"
              stroke-dashoffset="20"
      ></circle>
    </svg>
    <slot></slot>
  </div>
</template>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .progress-circle {
    position relative
    circle {
      stroke-width 8px
      transform-origin center
      &.progress-background {
        transform scale(0.9)
        stroke $color-theme-d
      }
      &.progress-bar {
        transform scale(0.9) rotate(-90deg)
        stroke $color-theme
      }
    }
  }
</style>

基础样式被应用到迷你播放器

在迷你播放器页面中 用原因进度条包裹住按钮，但是出现了上面图片中的样子。原因是因为这里显示了两个dom元素，被挤压了。

        <div class="control">
          <progress-circle>
            <i :class="miniIcon" @click.stop="togglePlaying"></i>
          </progress-circle>
        </div>

所以给图标添加一个定位样式class="icon-mini"

 .icon-mini {
     font-size: 32px
     position: absolute
     left: 0
     top: 0
 }

svg 属性说明

svg：<svg width="32" height="32" viewBox="0 0 100 100" version="1.1" ` 上面表示：把 左上角0 0 和右下角100 100（也就是宽高100的正方形）放入 实际宽度32x32的容器中

circle:

  1. r :半径

  2. cx ：x坐标

  3. cy : y 坐标

  4. stroke-width：8px ： 描边宽度

  5. stroke-dasharray ：描边路径长度

    虚线和间隙的值的集合，可以定义为2,2,表示虚线长度2，间隔2；如果一个条线长度为10，那么表示每隔2的长度有一条线。 如果定义为2，那么虚线和间隙都是2，效果和上面的一样
    如果定义为10，那么虚线和间隙都是10，表现出来的效果则是，虚线占满了长度为10的线条，所以这个时候再使用stroke-dashoffset偏移，先偏移9，你则会看到最右边有1的没有被占满，所以这个组合可以用来实现圆形进度条的动画效果

  6. stroke-dashoffset：覆盖的周长（虚线偏移量，越小则偏移越小）

  7. stroke ： 描边的颜色

<circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"></circle> 这句话是定义了一个半径50的圆形，结合csstransform-origin center（中心点移动），定位到容器的 50,50 处。 相对于svg的100来说，就是矩形的中心点 ；

比如：上面定义的圆半径为50，那么这个圆的描边路径就是周长π直径 = π100 ≈ 314， 描边路径长度314；stroke-dasharray = 314 表示把虚线和间隙都设置为314，这个时候只需要慢慢的设置stroke-dashoffset的偏移长度，让间隙显示出来，偏移300，则表示虚线只显示14.依次类推

参考资料：http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/

完整的圆形进度条代码

<template>
  <div class="progress-circle">
    <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
      <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"></circle>
      <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent"
              :stroke-dasharray="dasharray"
              :stroke-dashoffset="dashoffset"
      ></circle>
    </svg>
    <slot></slot>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
      radius: {
        type: Number,
        default: 100
      },
      /** 进度条百分比 */
      percent: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        dasharray: Math.PI * 100
      }
    },
    computed: {
      dashoffset() {
        return (1 - this.percent) * this.dasharray
      }
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .progress-circle {
    position relative
    circle {
      stroke-width 8px
      transform-origin center
      &.progress-background {
        transform scale(0.9)
        stroke $color-theme-d
      }
      &.progress-bar {
        transform scale(0.9) rotate(-90deg)
        stroke $color-theme
      }
    }
  }
</style>

在迷你的播放器例子中其实只需要一个圆形就可以了（circle），这里有两个其实就是，一个是底色，一个是进度色，而播放器控制按钮就是一个圆形的图标。