canvas实现有递增动画的环形进度条的实现方法
|
this在swiperChange函数中指向swiper对象。this.activeIndex是swiper实例的属性，用官方的话说“返回当前活动块(激活块)的索引。”可以理解他指的是当前翻到的是哪一页，就是当前你所看的swiper-slide的下标。 我因为用户的身份，会判断性的决定当前canvas所在swiper前一页是否展示。 如果不展示就根本不会绘制前一页，那么相应的当前页的swiper的下标就会变成（index-1）。 总而言之，当满足条件、用户翻到canvas所在swiper页面后，我就要触发if里边的圆环绘制逻辑。否则就走到else里初始化数据页面的状态、清除定时器暂停动画、并把彩色圆环清空 （3）vm.aniShow 在我上篇《纯css绘制柱状图》里边说了，柱状图的动画要跟canvas的动画一起说。因为他们的动画实现需要配合swiper的切换。说的就是这里的代码： vue - data - aniShow属性变为true时，div.row就会添加ani这个class类名： 同样，aniShow为true，progress的高度就会附上自己的目标值，也就是这个progress的实际高度经过百分制转化后被赋予给了style属性的height。 此时，因为progress的transition监听了height变化，就开始有了高度渐增的柱状图递增动画了。 而ani类名下，progress的transition-delay实现了其高度错开递增效果。 可能只看文字描述很晦涩，再看一眼效果： （4）彩色圆环绘制代码部分 gradeTarget是实际分值，是最终要绘制到的结果。 grade从0开始，自增到gradeTarget的大小。 这里我没有直接++vm.grade，我也不知道自己当时咋想的。 if判断，如果grade递增到了目标值gradeTarget或者大于目标值，就停止递增，并让grade=gradeTarget。属于临界值的判断。在运动功能中，又算碰撞检测。 反之，不到目标的话，就清除上一次绘制的canvas画布，在grade递增变化后重新绘制新的彩色圆环。 （5）所有这些放到setTimeout中，暂停500毫秒再执行，是为了等柱图和环图入场后，在开始绘制圆环的递增效果。 其实上边代码都是很简单的逻辑处理，看官们读一遍代码应该就差不离了。 新想法： 这个效果是我很久以前做的，今天在整理制作方法的时候，我想到自己代码的一种优化方案： 其实没必要在定时器里重新调用彩色圆环绘制方法。我们直接改的是this.grade属性，监听这个属性的改变就好了其实。这样此属性在定时器中被修改，圆环方法就会自动执行。 这还是一个想法，还需要我的实践。 中间文字的递增效果： 因为grade是每次递增的分数，所以利用vue的双向数据绑定，直接把grade当作分数值绑定到对应dom视图处即可。 最后，圆环和上边柱状图的动画结合，就是animation控制一下动画延迟即可。很简单的。 index.vue源码： （注，源码稍作整理，单独提取。为了完整性也为了保护其他业务代码，部分变量名做了修改，可能会和之前截图中略微不同） （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
