快捷導(dǎo)航

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

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

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

前言：

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

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

讓我們先看下效果

　說(shuō)明：此gif清晰度很低，因?yàn)檗D(zhuǎn)成gif圖的時(shí)候，質(zhì)量受損，幀數(shù)減少，所以倒計(jì)時(shí)轉(zhuǎn)到紅色時(shí)候看起來(lái)變的很模糊。但是實(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)作

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

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

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

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

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

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

修煉js寶典，get canvas技能

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

總結(jié)

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

您可能感興趣的文章: