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)
這裡是因為業務,才這麼判斷,可以忽略。
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。(具體換算規則還是見上篇《純css繪製柱狀圖》)
此時,因為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原始碼:
(注,原始碼稍作整理,單獨提取。為了完整性也為了保護其他業務程式碼,部分變數名做了修改,可能會和之前截圖中略微不同)
1 <template lang='pug'> 2 .indexs#Indexs.app-bg 3 transition(name="fade") 4 swiper#swiperBox(:options="swiperOption" ref="mySwiper") 5 swiper-slide.swiper-slide1 6 .container 7 .up 8 swiper-slide.swiper-slide2(v-if="isShow") 9 .my-shark 10 .up 11 swiper-slide.swiper-slide3 12 .container 13 .data-cont 14 .data.data01 15 .data01-charts 16 .row(v-for='item,index in Data' :key="index" :class='aniShow ? "ani":""') 17 .data-txt {{item.grade > 0 ? item.grade : '無資料'}} 18 .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'") 19 span.pg-data 20 .week {{item.week}} 21 .data.data02 22 .data02-charts 23 .canvas-box 24 //- baseCanvas 25 canvas#baseCanvas.my-canvas(ref="baseCanvas" width="174" height="174") 26 //- canvas 27 canvas#myCanvas.my-canvas.clr-canvas(ref="myCanvas" width="174" height="174") 28 .canvas-data #[span.num {{grade}}]分 29 30 </template> 31 <script> 32 var vm = null, 33 timer1 = null, 34 /* canvas基礎值 */ 35 c = null, //document.getElementById("myCanvas"); 36 ctx = null, //canvas-2d畫布 37 x = 161 / 2 + 1, //圓心座標 38 r = (161 - 10) / 2; //半徑大小 39 40 /* swiper元件 */ 41 import { swiper, swiperSlide } from "vue-awesome-swiper"; 42 import { getData } from "../io/getData"; 43 44 export default { 45 name: "Indexs", 46 components: { 47 swiper, 48 swiperSlide 49 }, 50 data() { 51 return { 52 grade: 0, //圓環圖分數 53 gradeTarget: 78.54, //實際得分數,可ajax請求資料後修改 54 isShow: true,//是否展示第二頁swiper 55 aniShow: false,//是否開啟柱圖動畫 56 Data:[{ 57 week: "第一週", 58 grade: 0 59 }, 60 { 61 week: "第二週", 62 grade: 30 63 }, 64 { 65 week: "第三週", 66 grade: 99.99 67 }, 68 { 69 week: "第四周", 70 grade: 76.98 71 }, 72 { 73 week: "第五週", 74 grade: 100 75 }], 76 77 swiperOption: { 78 //swiper引數 79 notNextTick: true, 80 direction: "vertical", 81 grabCursor: true, 82 setWrapperSize: true, 83 autoHeight: true, 84 slidesPerView: 1, 85 mousewheel: false, 86 mousewheelControl: false, 87 height: window.innerHeight, // 高度設定,佔滿裝置高度 88 resistanceRatio: 0, 89 observeParents: true, 90 initialSlide: 2 - 1, //設定初始化時,swiper的預設展示頁面,從零開始 91 on: { 92 slideChange() { 93 if ( 94 (this.activeIndex == 2 && vm.isShow) || 95 (this.activeIndex == 1 && !vm.isShow) 96 ) { 97 console.log(this.activeIndex, vm.isShow, "繪製動畫"); 98 setTimeout(function() { 99 // 配合展示柱狀圖動畫 100 vm.aniShow = true; 101 // 定時器不斷觸發繪製彩色圓環,實現圓環動畫效果 102 timer1 = setInterval(function() { 103 // 中間分數文案更改 104 var num = vm.grade; 105 num++; 106 if (num >= vm.gradeTarget) { 107 vm.grade = vm.gradeTarget; 108 clearInterval(timer1); 109 } else { 110 vm.grade = num; 111 } 112 vm.clearCanvas(); 113 vm.drawClrCanvas(); 114 }, 1000 / 60); 115 }, 500); 116 } else { 117 // 翻頁後,初始化資料頁面的狀態、清除定時器暫停動畫、並把彩色圓環清空 118 console.log("其他頁"); 119 clearInterval(timer1); 120 vm.grade = 0; 121 vm.aniShow = false; 122 vm.clearCanvas(); 123 } 124 } 125 } 126 } 127 }; 128 }, 129 computed: {}, 130 mounted() { 131 // 初始化資料、繪製灰色圓環 132 vm = this; 133 c = this.$refs.myCanvas; 134 ctx = c.getContext("2d"); 135 this.drawBaseCanvas(); 136 }, 137 methods: { 138 drawBaseCanvas() { 139 // canvas繪製 140 /* 基礎值 */ 141 var c = this.$refs.baseCanvas, //document.getElementById("myCanvas"); 142 // debugger; 143 ctx = c.getContext("2d"), 144 o = x, 145 randius = r; 146 /* 預設灰色圓圈 */ 147 ctx.strokeStyle = "#eee"; 148 ctx.lineWidth = 10; 149 ctx.beginPath(); 150 ctx.arc(o, o, randius, 0, 2 * Math.PI); 151 ctx.stroke(); 152 }, 153 clearCanvas() { 154 // 清除畫布 155 ctx.clearRect(0, 0, 200, 200); 156 }, 157 drawClrCanvas() { 158 var gradient = ctx.createLinearGradient(75, 50, 5, 90); 159 gradient.addColorStop("0", "#C88EFF"); 160 gradient.addColorStop("1.0", "#7E5CFF"); 161 ctx.strokeStyle = gradient; // 用漸變進行填充 162 ctx.lineWidth = 10; 163 ctx.lineCap = "round"; 164 ctx.shadowColor = "rgba(191,142,255, 0.36)"; 165 ctx.shadowBlur = 8; 166 ctx.shadowOffsetY = 8; 167 ctx.beginPath(); 168 var count = this.grade / (100 / 2) + 1; 169 ctx.arc(x, x, r, Math.PI, Math.PI * count, false); 170 ctx.stroke(); 171 } 172 } 173 }; 174 </script> 175 <style lang='scss'> 176 // 柱圖 177 .row { 178 position: relative; 179 z-index: 1; 180 width: 0.61rem; 181 margin-bottom: -0.28 - 0.08 - 0.38rem; 182 text-align: center; 183 } 184 185 .data-txt { 186 font-size: 0.2rem; 187 line-height: 0.2rem; 188 margin-bottom: 0.09rem; 189 } 190 191 .progress { 192 height: 0rem; 193 transition: height 0.5s ease-in-out; 194 } 195 196 .ani { 197 @for $i from 1 to 6 { 198 &:nth-of-type(#{$i}) { 199 .progress { 200 transition-delay: #{$i * 0.15}s; 201 } 202 } 203 } 204 // &:nth-of-type(1) { 205 // .progress { 206 // transition-delay: .4s; 207 // } 208 // } 209 210 // &:nth-of-type(2) { 211 // .progress { 212 // transition-delay: .8s; 213 // } 214 // } 215 216 // &:nth-of-type(3) { 217 // .progress { 218 // transition-delay: 1s; 219 // } 220 // } 221 222 // &:nth-of-type(4) { 223 // .progress { 224 // transition-delay: 1.4s; 225 // } 226 // } 227 228 // &:nth-of-type(5) { 229 // .progress { 230 // transition-delay: 1.8s; 231 // } 232 // } 233 } 234 235 .pg-data { 236 display: block; 237 width: 0.12rem; 238 height: 100%; 239 margin: 0 auto; 240 background: linear-gradient(0deg, #c88eff 0%, #7e5cff 100%); 241 box-shadow: 0 -0.04rem 0.14rem 0 rgba(129, 93, 255, 0.4); 242 border-radius: 0.05rem 0.05rem 0 0; 243 } 244 245 // 0分展示規則 246 .nodata { 247 .pg-data { 248 border-radius: 0; 249 background: #e7e7e7; 250 box-shadow: none; 251 } 252 } 253 254 .week { 255 font-size: 0.2rem; 256 line-height: 0.2rem; 257 margin-top: 0.08rem; 258 color: #666; 259 } 260 // 環圖 - data02資料部分 261 .data02-charts { 262 margin-top: 0.32rem; 263 height: 1.61rem; 264 } 265 266 .canvas-box { 267 position: relative; 268 float: left; 269 width: 1.61rem; 270 height: 1.61rem; 271 margin-left: 0.92rem; 272 } 273 274 .my-canvas { 275 width: 1.61rem; 276 height: 1.61rem; 277 } 278 .clr-canvas { 279 position: absolute; 280 top: 0; 281 left: 0; 282 } 283 284 .canvas-data { 285 position: absolute; 286 top: 0.56rem; 287 left: 0; 288 right: 0; 289 margin: auto; 290 margin-left: -0.1rem; 291 text-align: center; 292 font-size: 0.24rem; 293 294 .num { 295 font-size: 0.32rem; 296 font-weight: 600; 297 } 298 } 299 </style>