前言：

　　此事例是在vue組件中，使用canvas實現(xiàn)倒計時動畫的效果。其實，實現(xiàn)效果的邏輯跟vue沒有關系，只要讀懂canvas如何實現(xiàn)效果的這部分邏輯就可以了

　　canvas動畫的原理：利用定時器，給定合理的幀數(shù)，不斷的清除畫布，再重繪圖形，即呈現(xiàn)出動畫效果。　

讓我們先看下效果

　 說明：此gif清晰度很低，因為轉成gif圖的時候，質量受損，幀數(shù)減少，所以倒計時轉到紅色時候看起來變的很模糊。但是實際在瀏覽器上效果全程都是很清晰和連貫的

使用

npm
 npm install vue-canvas-countdown --save-dev
es6 import
 import countDown from 'vue-canvas-countdown'

源碼、demo、使用方法請參考github：https://github.com/Damon0820/vue-countdown

左手右手一個慢動作

　　說明：扇形顏色是漸變的（仔細看圖：扇形逆時針方向漸變顏色，內側淺，外側深）

　　 動畫步驟分析：假如設定倒計時總時間為15s， 變黃色時機為10s，變紅色時機為5s。

　　1、開始倒計時后顏色為綠色。綠色含義是：倒計時的時間離結束時間還很長。

　　2、10s后變黃色。黃色的含義是：倒計時的時間離結束時間挺近了，起警告作用。動畫中，出現(xiàn)快速旋轉的扇形。

　　3、5s后變紅色。紅色的含義是：倒計時的時間馬上就要結束了，起強烈警告作用。動畫中，快速旋轉的扇形速度加快。

　　4、0s倒計時結束。動畫消失。靜態(tài)圓形框中顯示提示文字。

修煉js寶典，get canvas技能

    之前對于canvas一竅不通，網(wǎng)上查了資料，介紹api的時候過于簡單，也不好理解，看別人寫的示例代碼，更是懵逼。而后，回歸原始，修煉經(jīng)典的《JavaScript高級程序設計》這本js寶典。書本二三十頁的介紹canvas部分，系統(tǒng)的學習了一下。邊看邊寫效果，20多頁的書看完了，效果也寫出來了。對于新手，我推薦找到系統(tǒng)介紹canvas的資料，先花一兩個先熟悉下canvas的api，然后實現(xiàn)效果就是分分鐘的事了

總結

以上所述是小編給大家介紹的vue+canvas實現(xiàn)炫酷時鐘效果的倒計時插件（已發(fā)布到npm的vue2插件，開箱即用），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論