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

高清大图！

码农多年，老眼昏花，动图看不清？！那就看静态截图！！！

差异分值结果如下：

看完了卖家秀，我们来看产物的建造进程吧！

canvas绘制圆环1、vue中，<template lang="pug">里的代码如下：

canvas#baseCanvas是底部的灰色圆环

canvas#myCanvas是上边的彩色圆环

必要用css样式辅佐我们把彩色圆环盖到灰色圆环上边。

2、css样式：

 3、js-canvas的样式绘制代码

这段代码也很简朴，看canvas的api即可

3-1、vue组件中，script标签顶部界说必要用的变量

3-2、vue的methos工具中，界说要领三个：

drawBaseCanvas：用来绘制底部灰色圆环。因为灰色圆环没有动画结果，以是一开始就绘制一个完备的灰色圆环即可。drawClrCanvas：用来绘制上边的彩色圆环。clearCanvas：用来清空画布。这是彩色圆环动画必要。由于我们圆环动画结果的焦点就是，每隔一段时刻就把彩色圆环清空一下，然后把竣事角度值增大、重画，这样持续起来就是动画。

以下是三个要领的代码：

上边三个要领里边的代码，险些都是对canvas API的应用，看教程即可。

只有draoClrCanvas要领中，canvas圆形的绘制时，arc的参数里关于开始值、竣事值的配置。

开始值抉择了圆环的起始绘制位置，竣事值抉择了竣事的位置（我仿佛说了一句空话，可是冥思苦想后的头脑描写笔墨，不想删掉哈哈哈）

这个竣事值的计较，对付我来嗣魅照旧较量贫困的。

count变量为什么要这么计较，我也忘了我是怎么鼓捣出来的了。

this.grade是100以内的正整数，暗示分值。被界说在data中，默认是0分。

以是一开始彩色圆环就看不见，由于起始点和竣事点都是0点。

假如变动grade的值，从0-100，canvas彩色圆环的值也就会变动。

这样，只要我们逐渐修改grade的值，从头绘制，彩色圆环就会逐渐递增，实现动画结果。

圆环动画结果

因为我这里需求非凡，必要用户每次翻到canvas地址swiper时，才会触动员画（其后更贫困一点必要柱状图和canvas部门有个入场结果后，动画才开始。结果就是上图中最长的那张gif动画那样）。

以是我得借助swiper才气实现。在swiper切换的回调函数中，从0开始不断递增grade分数，并从头触发彩色圆环的绘制，进而实现动画结果。

vue中我用的swiper是'vue-awesome-swiper'。她的用法我在其他文章中写过步调。

swiper在vue-data中的设置里，有一个on工具。在on工具中的slideChange函数，就是每次翻页swiper时会触发的回调函数。

这里我说一下几个较量非凡的点：

（1）vm：是我早就在vue的script中存储的变量，初始化为null，然后在mounted中，将其赋值为vue实例工具。

初始化数据、绘制灰色圆环

通过这种要领，我在vue实例工具 - data - swiper - 回调函数中去拿vue实例工具 - data中的grade和gradeTarget属性值，并对其举办修改。

ps：我也不知道这么做是不是很傻的一种做法，其时做到这里时是我碰着的一个困难，不知道怎么在swiper的on回调中获取vue实例。于是就有了这么曲线救国的要领。假如看官有更好的办理方案，但愿可以给我提供一个新的思绪，谢谢不尽哦亲

（2）(this.activeIndex == 2 && vm.isStar) || (this.activeIndex == 1 && !vm.isStar)

这里是由于营业，才这么判定，可以忽略。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!