canvas实现有递增动画的环形进度条的实现方法

<template lang='pug'>
  .indexs#Indexs.app-bg
    transition(name="fade")
      swiper#swiperBox(:options="swiperOption" ref="mySwiper")
        swiper-slide.swiper-slide1
          .container
          .up
        swiper-slide.swiper-slide2(v-if="isShow")
          .my-shark
          .up
        swiper-slide.swiper-slide3
          .container
            .data-cont
              .data.data01
                .data01-charts
                  .row(v-for='item,index in Data' :key="index" :class='aniShow ? "ani":""')
                    .data-txt {{item.grade > 0 ? item.grade : '无数据'}}
                    .progress(:class='item.grade == 0 ? "nodata" : ""' :style="'height: ' + (aniShow ? (item.grade >= 100 ? (100 * 1.5) / 100 : item.grade == 0 ? 0.04 : item.grade * 1.5 / 100) : 0) +'rem'")
                      span.pg-data
                    .week {{item.week}}
              .data.data02
                .data02-charts
                  .canvas-box
                    //- baseCanvas
                    canvas#baseCanvas.my-canvas(ref="baseCanvas" width="174" height="174")
                    //- canvas
                    canvas#myCanvas.my-canvas.clr-canvas(ref="myCanvas" width="174" height="174")
                    .canvas-data #[span.num {{grade}}]分
                  
</template>
<script>
var vm = null,
  timer1 = null,
  /* canvas基础值 */
  c = null, //document.getElementById("myCanvas");
  ctx = null, //canvas-2d画布
  x = 161 / 2 + 1, //圆心坐标
  r = (161 - 10) / 2; //半径大小

/* swiper组件 */
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getData } from "../io/getData";

export default {
  name: "Indexs",
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      grade: 0, //圆环图分数
      gradeTarget: 78.54, //实际得分数，可ajax请求数据后修改
      isShow: true,//是否展示第二页swiper
      aniShow: false,//是否开启柱图动画
      Data:[{
          week: "第一周",
          grade: 0
        },
        {
          week: "第二周",
          grade: 30
        },
        {
          week: "第三周",
          grade: 99.99
        },
        {
          week: "第四周",
          grade: 76.98
        },
        {
          week: "第五周",
          grade: 100
        }],
      
      swiperOption: {
        //swiper参数
        notNextTick: true,
        direction: "vertical",
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        slidesPerView: 1,
        mousewheel: false,
        mousewheelControl: false,
        height: window.innerHeight, // 高度设置，占满设备高度
        resistanceRatio: 0,
        observeParents: true,
        initialSlide: 2 - 1, //设置初始化时，swiper的默认展示页面，从零开始
        on: {
          slideChange() {
            if (
              (this.activeIndex == 2 && vm.isShow) ||
              (this.activeIndex == 1 && !vm.isShow)
            ) {
              console.log(this.activeIndex, vm.isShow, "绘制动画");
              setTimeout(function() {
                // 配合展示柱状图动画
                vm.aniShow = true;
                // 定时器不断触发绘制彩色圆环，实现圆环动画效果
                timer1 = setInterval(function() {
                  // 中间分数文案更改
                  var num = vm.grade;
                  num++;
                  if (num >= vm.gradeTarget) {
                    vm.grade = vm.gradeTarget;
                    clearInterval(timer1);
                  } else {
                    vm.grade = num;
                  }
                  vm.clearCanvas();
                  vm.drawClrCanvas();
                }, 1000 / 60);
              }, 500);
            } else {
              // 翻页后，初始化数据页面的状态、清除定时器暂停动画、并把彩色圆环清空
              console.log("其他页");
              clearInterval(timer1);
              vm.grade = 0;
              vm.aniShow = false;
              vm.clearCanvas();
            }
          }
        }
      }
    };
  },
  computed: {},
  mounted() {
    // 初始化数据、绘制灰色圆环
    vm = this;
    c = this.$refs.myCanvas;
    ctx = c.getContext("2d");
    this.drawBaseCanvas();
  },
  methods: {
    drawBaseCanvas() {
      // canvas绘制
      /* 基础值 */
      var c = this.$refs.baseCanvas, //document.getElementById("myCanvas");
        // debugger;
        ctx = c.getContext("2d"),
        o = x,
        randius = r;
      /* 默认灰色圆圈 */
      ctx.strokeStyle = "#eee";
      ctx.lineWidth = 10;
      ctx.beginPath();
      ctx.arc(o, o, randius, 0, 2 * Math.PI);
      ctx.stroke();
    },
    clearCanvas() {
      // 清除画布
      ctx.clearRect(0, 0, 200, 200);
    },
    drawClrCanvas() {
      var gradient = ctx.createLinearGradient(75, 50, 5, 90);
      gradient.addColorStop("0", "#C88EFF");
      gradient.addColorStop("1.0", "#7E5CFF");
      ctx.strokeStyle = gradient; // 用渐变进行填充
      ctx.lineWidth = 10;
      ctx.lineCap = "round";
      ctx.shadowColor = "rgba(191,142,255, 0.36)";
      ctx.shadowBlur = 8;
      ctx.shadowOffsetY = 8;
      ctx.beginPath();
      var count = this.grade / (100 / 2) + 1;
      ctx.arc(x, x, r, Math.PI, Math.PI * count, false);
      ctx.stroke();
    }
  }
};
</script>
<style lang='scss'>
// 柱图
.row {
  position: relative;
  z-index: 1;
  width: 0.61rem;
  margin-bottom: -0.28 - 0.08 - 0.38rem;
  text-align: center;
}

.data-txt {
  font-size: 0.2rem;
  line-height: 0.2rem;
  margin-bottom: 0.09rem;
}

.progress {
  height: 0rem;
  transition: height 0.5s ease-in-out;
}

.ani {
  @for $i from 1 to 6 {
    &:nth-of-type(#{$i}) {
      .progress {
        transition-delay: #{$i * 0.15}s;
      }
    }
  }
  // &:nth-of-type(1) {
  //   .progress {
  //     transition-delay: .4s;
  //   }
  // }

  // &:nth-of-type(2) {
  //   .progress {
  //     transition-delay: .8s;
  //   }
  // }

  // &:nth-of-type(3) {
  //   .progress {
  //     transition-delay: 1s;
  //   }
  // }

  // &:nth-of-type(4) {
  //   .progress {
  //     transition-delay: 1.4s;
  //   }
  // }

  // &:nth-of-type(5) {
  //   .progress {
  //     transition-delay: 1.8s;
  //   }
  // }
}

.pg-data {
  display: block;
  width: 0.12rem;
  height: 100%;
  margin: 0 auto;
  background: linear-gradient(0deg, #c88eff 0%, #7e5cff 100%);
  box-shadow: 0 -0.04rem 0.14rem 0 rgba(129, 93, 255, 0.4);
  border-radius: 0.05rem 0.05rem 0 0;
}

// 0分展示规则
.nodata {
  .pg-data {
    border-radius: 0;
    background: #e7e7e7;
    box-shadow: none;
  }
}

.week {
  font-size: 0.2rem;
  line-height: 0.2rem;
  margin-top: 0.08rem;
  color: #666;
}
// 环图 - data02数据部分
.data02-charts {
  margin-top: 0.32rem;
  height: 1.61rem;
}

.canvas-box {
  position: relative;
  float: left;
  width: 1.61rem;
  height: 1.61rem;
  margin-left: 0.92rem;
}

.my-canvas {
  width: 1.61rem;
  height: 1.61rem;
}
.clr-canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.canvas-data {
  position: absolute;
  top: 0.56rem;
  left: 0;
  right: 0;
  margin: auto;
  margin-left: -0.1rem;
  text-align: center;
  font-size: 0.24rem;

  .num {
    font-size: 0.32rem;
    font-weight: 600;
  }
}
</style>