快捷導(dǎo)航

vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開箱即用）

更新時(shí)間：2018年11月05日 09:17:12 作者：Damon風(fēng)

這篇文章主要介紹了vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開箱即用） ,需要的朋友可以參考下

前言：

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

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

讓我們先看下效果

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

使用

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

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

左手右手一個(gè)慢動(dòng)作

　　說明：扇形顏色是漸變的（仔細(xì)看圖：扇形逆時(shí)針方向漸變顏色，內(nèi)側(cè)淺，外側(cè)深）

　　動(dòng)畫步驟分析：假如設(shè)定倒計(jì)時(shí)總時(shí)間為15s，變黃色時(shí)機(jī)為10s，變紅色時(shí)機(jī)為5s。

　　1、開始倒計(jì)時(shí)后顏色為綠色。綠色含義是：倒計(jì)時(shí)的時(shí)間離結(jié)束時(shí)間還很長。

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

　　3、5s后變紅色。紅色的含義是：倒計(jì)時(shí)的時(shí)間馬上就要結(jié)束了，起強(qiáng)烈警告作用。動(dòng)畫中，快速旋轉(zhuǎn)的扇形速度加快。

　　4、0s倒計(jì)時(shí)結(jié)束。動(dòng)畫消失。靜態(tài)圓形框中顯示提示文字。

修煉js寶典，get canvas技能

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

總結(jié)

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

您可能感興趣的文章: