2. 程式人生 > >更新——Canvas畫布動畫效果之實現倒計時

更新——Canvas畫布動畫效果之實現倒計時

阿新 • • 發佈：2017-10-14
判斷 大神 radius 希望 日期 ~~ width radi 多少

Hello，大家好！

小W復活啦！繼續歡樂的給大家更博，輸送新知識~~

不開玩笑啦！秒進正題~~~

上次更博，小W給大家介紹了Canvas畫布的基礎部分，以及實現了一個由7*10點陣圖顯示的倒計時的基本架構。

上次的效果如下圖所示，僅僅只是一個時間的靜態顯示而已：

技術分享

今天呢，小W想實現就是，讓它開始倒計時！效果先給大家看一下：

技術分享

Canvas畫布用於圖形的繪制、動畫，都是通過腳本（JavaScript）實現的。

上次更博，countdown.js代碼中，已經實現了時：分：秒的基本架構，先把上次的JS代碼再次梳理一下，在這個基礎上，小W再進行接下來的操作：

// 全局變量  有助於後期數據的變動更改  
 

var WINDOW_WIDTH = 1024; 
var WINDOW_HEIGHT = 768;  // 此處需要註意寬高的比例 適當縮小放大畫布的時候，盡量同時縮小放大，避免出現圓形顯示為橢圓形等不對稱現象
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

window.onload = function(){
    
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    
    canvas.width 
 
= WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    
    render( context );
}

function render( cxt ){
    
    var hours = 12;
    var minute = 36;
    var second = 59;
    // 小時 為了顯示效果好看、設置居中，給每個數字設置margin
     renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt ); 
     // 每個字水平點陣個數為直徑7，半徑：7*2 = 14，14+1 = 15 （1間隔）    
 

     renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt );
    
     // 冒號 （4*2+1）= 9  digit.js中 10代表 ：
     renderDigit( MARGIN_LEFT+ 30*(RADIUS+1) , MARGIN_TOP , 10 , cxt );
    // 分鐘 
     renderDigit( MARGIN_LEFT+ 39*(RADIUS+1) , MARGIN_TOP , parseInt(minute/10) , cxt );
     renderDigit( MARGIN_LEFT+ 54*(RADIUS+1) , MARGIN_TOP , parseInt(minute%10) , cxt );
    
     renderDigit( MARGIN_LEFT+ 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt );
    // 秒
     renderDigit( MARGIN_LEFT+ 78*(RADIUS+1) , MARGIN_TOP , parseInt(second/10) , cxt );
     renderDigit( MARGIN_LEFT+ 93*(RADIUS+1) , MARGIN_TOP , parseInt(second%10) , cxt );    
}

function renderDigit(x , y , num , cxt){     // X軸坐標、Y軸坐標、將要顯示的數字、canvas上下文語境
　　cxt.fillStyle = "#005588"; 

　　for (var i = 0 ; i < digit[num].length ;i++) {
　　 　　for (var j = 0 ; j < digit[num][i].length ;j++){ 
　　
　　　　　　if(digit[num][i][j] == 1){ cxt.beginPath(); 

　　　　　　　　// 圓心位置公式 
　　　　　　　　cxt.arc( x+j * 2 * (RADIUS+1) + (RADIUS+1) , y+i * 2 * (RADIUS+1) + (RADIUS+1) , RADIUS , 0 , 2*Math.PI ); cxt.closePath(); cxt.fill();
　　　　 　　}
　　 　　} 
　　} 
}

梳理完成之後我們可以進行下一步操作了，首先，我們需要設置一個截止時間，倒計時就是從現在開始到截止時間所剩余的時間：

//限制： 小時二位數 不超過4天
var endTime = new Date(2017,9,15,18,15,26);   // 註意！！！：data中的參數第二個表示月份，是由0-11表示的。0 - 一月；11- 十二月

　　這裏需要註意，我們在之前調取小時hours的位數的時候，僅僅只是設置了兩位數，因而現在我們的倒計時最多到99:99:99，也就是四天。如果有讀者需要實現更長時間的倒計時，需要再做些許調整，為了效果美觀整潔，我們這裏只設置兩位數。使用JS提供的data()方式設置截止時間。

在render函數中，如何獲取當前時間距離截止時間剩余時間？

　　JS的data對象給我們提供了一個getTime的方法：它返回了距離1970.1.1的00:00:00的毫秒數，用這個方法減去截止日期的getTime()，這個差值就表示中間我們需要倒計時的小時、分鐘和秒數，但是由於時間是一秒一秒變動的，這個動畫效果需要不斷的與當前時間作比較，為此我們設計一個全局的變量，來表示現在倒計時需要多少秒？

var curShowTimeSecond = 0;   // 現在倒計時需要多少毫秒，  —— > 秒

接下來，對 curShowTimeSecond 進行具體的計算：

curShowTimeSecond = getCurShowTimeSecond(); // 封裝一個函數
// javascript Date 提供了 getTime 函數 以便於獲取實時時間
// getCurShowTimeSecond 函數 獲取當前總共的毫秒數
function getCurShowTimeSecond(){
    var curTime = new Date();  // 獲取當前的時間是多少
    var ret = endTime.getTime() - curTime.getTime();  //ret 獲取截止時間與當前時間相差的毫秒數
    ret = Math.round( ret/1000 ); // 將毫秒轉換成秒
    
    return ret>=0 ? ret : 0;     // 判斷 ret，倒計時結束，函數返回0.
}

現在，剩余時間的秒數已經得到了，我們接下來需要設置小時、分鐘、秒數的顯示：

    var hours = parseInt( curShowTimeSecond/3600 );   // 剩余時間有多少個小時
    var minute = parseInt( (curShowTimeSecond - hours * 3600) / 60 );     // 減去小時，剩余時間的分鐘數
    var second = curShowTimeSecond % 60;   // 減去小時、分鐘後，剩余時間還剩多少秒

到這裏，在瀏覽器的刷新後，倒計時可以實現實時更新了。

然而我們想要實現的是讓它自己更新、變化，實現倒計時，接下來我們需要引入一個實現動畫的基礎函數——定時器setInterval() 方法：

// 動畫效果
    setInterval(
        function(){
            render( context ); // 繪制當前的畫面。
            update(); // 根據繪制畫面所需要的數據結構，對數據結構進行調整。
        },
        50  // 毫秒
    );

　　其實，我們可以直接獲取新的時間在render()裏面進行繪制就可以了，但是這個最終的效果是想要實現，隨著時間變化，產生彩色小球的物理變化的動畫，因為為了鋪墊後文，我們使用了一個update() 函數，如下圖所示：

技術分享

// 時間更新函數
function update(){

    // 註意 render 裏面是繪制curShowTimeSecond 
    var nextShowTimeSecond = getCurShowTimeSecond();  // 下一次
    
    // 下一次要顯示的時間（時\分\秒分解） 
    var nextHours = parseInt( nextShowTimeSecond/3600 );      
    var nextMinute = parseInt( (nextShowTimeSecond - nextHours * 3600) / 60 );  
    var nextSecond = nextShowTimeSecond % 60;
    
    var curtHours = parseInt( curShowTimeSecond/3600 );    
    var curtMinute = parseInt( (curShowTimeSecond - curtHours * 3600) / 60 );  
    var curtSecond = curShowTimeSecond % 60;
    
    if(nextSecond != curtSecond)   // 下一次顯示的秒數不等於當前顯示的秒數了，替換為新的時間
        curShowTimeSecond = nextShowTimeSecond;      
}

為了避免當前新圖像，與之前的圖像疊加，我們在render()裏面引入一個新的函數：

// 為避免新一次的圖像與之前的圖像疊加。
// clearRect(): 對一個矩形空間內的圖像進行一次刷新操作。這裏，對整個屏幕進行一次操作、刷新。
   cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);

到這裏我們今天的效果已經基本實現了。

後續學習後，還會繼續更新，與大家分享...希望可以多多關註！

如果有任何問題，大家可以提出來，小W同大家一起解決，有何不妥的地方也請大神多多指教，這次的博文就到這了，謝謝大家！

附完整countdown.js代碼 

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

//限制： 小時二位數 不超過4天
var endTime = new Date(2017,9,15,18,15,26);   // 註意！！！：data中的參數第二個表示月份，是由0-11表示的。0 - 一月；11- 十二月
var curShowTimeSecond = 0;   // 現在倒計時需要多少毫秒


window.onload = function(){
    
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    
    curShowTimeSecond = getCurShowTimeSecond();   //curShowTimeSecond：當前總共的毫秒數
    
    // 動畫效果
    setInterval(
        function(){
            render( context );
            update();
        },
        50  // 毫秒
    );
            
}

// javascript 的 Date 提供了 getTime 函數 以便於獲取實時時間
// getCurShowTimeSecond 函數 獲取當前總共的毫秒數
function getCurShowTimeSecond(){
    var curTime = new Date();  // 獲取當前的時間是多少
    var ret = endTime.getTime() - curTime.getTime();  //ret 獲取截止時間與當前時間相差的毫秒數
    ret = Math.round( ret/1000 ); // 將毫秒轉換成秒
    
    return ret>=0 ? ret : 0;     // 判斷 ret，倒計時結束，函數返回0.
}

// 時間更新函數
function update(){
    
    var nextShowTimeSecond = getCurShowTimeSecond();
    
    // 下一次要顯示的時間（時分秒分解）
    var nextHours = parseInt( nextShowTimeSecond/3600 );      
    var nextMinute = parseInt( (nextShowTimeSecond - nextHours * 3600) / 60 );  
    var nextSecond = nextShowTimeSecond % 60;
    
    var curtHours = parseInt( curShowTimeSecond/3600 );       // 一共需要多少個小時
    var curtMinute = parseInt( (curShowTimeSecond - curtHours * 3600) / 60 );  
    var curtSecond = curShowTimeSecond % 60;
    
    if(nextSecond != curtSecond)   
        curShowTimeSecond = nextShowTimeSecond;
    
}

function render( cxt ){
    
    // 為避免新一次的圖像與之前的圖像疊加。
    // clearRect(): 對一個矩形空間內的圖像進行一次刷新操作。這裏，對整個屏幕進行一次刷新。
    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);

    var hours = parseInt( curShowTimeSecond/3600 );       // 一共需要多少個小時
    var minute = parseInt( (curShowTimeSecond - hours * 3600) / 60 );  
    var second = curShowTimeSecond % 60;
    
    // 小時
     renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt ); 
     // 每個字水平位置直徑7,7*2 = 14半徑+1 = 15     
     renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt );
    
     // 冒號 （4*2+1）= 9  digit.js中 10代表 ：
     renderDigit( MARGIN_LEFT+ 30*(RADIUS+1) , MARGIN_TOP , 10 , cxt );
    // 分鐘 
      renderDigit( MARGIN_LEFT+ 39*(RADIUS+1) , MARGIN_TOP , parseInt(minute/10) , cxt );
        renderDigit( MARGIN_LEFT+ 54*(RADIUS+1) , MARGIN_TOP , parseInt(minute%10) , cxt );
    
     // 冒號 （4*2+1）= 9  digit.js中 10代表 ：
     renderDigit( MARGIN_LEFT+ 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt );
    // 秒
      renderDigit( MARGIN_LEFT+ 78*(RADIUS+1) , MARGIN_TOP , parseInt(second/10) , cxt );
      renderDigit( MARGIN_LEFT+ 93*(RADIUS+1) , MARGIN_TOP , parseInt(second%10) , cxt );    
}


function renderDigit(x , y , num , cxt){
    
    cxt.fillStyle = "#005588";
    for (var i = 0 ; i < digit[num].length ;i++) {
        for (var j = 0 ; j < digit[num][i].length ;j++){
        
                if(digit[num][i][j] == 1){
                    
                    cxt.beginPath();
                    // 圓心位置公式
                    cxt.arc( x+j * 2 * (RADIUS+1) + (RADIUS+1) ,  y+i * 2 * (RADIUS+1) + (RADIUS+1) , RADIUS , 0 , 2*Math.PI );
                    cxt.closePath();                                        
                    cxt.fill();             
            }            
        }        
    }    
}

更新——Canvas畫布動畫效果之實現倒計時

相關推薦

更新——Canvas畫布動畫效果之實現倒計時

判斷 大神 radius 希望 日期 ~~ width radi 多少 Hello，大家好！ 小W復活啦！繼續歡樂的給大家更博，輸送新知識~~ 不開玩笑啦！秒進正題~~~ 上次更博，小W給大家介紹了Canvas畫布的基礎部分，以及實現了一個由7*10點陣圖顯示的倒計時的基本

jQuery實現加入購物車飛入動畫效果之開發不停，填坑不止（起點位置在Y軸方向位置偏移）

開發時為了完成購物車的飛入拋物線，因為懶惰隨大流使用了fly.js外掛，用的時候遇到的兩個坑坑~~ 1. 有滾動條時，拋物體的起點位置在Y軸方向上有位置偏移，偏大 2. 頁面有滾動條時，拋物體的結束位置不一樣，偏大 我：(⊙o⊙)…煩煩的。。。這就是用別人東西的代價 。。。。。。 不

canvas動畫效果之星球守護

程式碼檔案 如題，我取了個比較炫酷的名字——星球守護。其實呢，也就是一個簡單的射擊小遊戲。作者並不是我，具體的效果可以去這裡體驗。我對程式碼做了部分修改與註釋，並且添加了爆炸音效，和遊戲結束音效。 ok!接下來我們就來一步一步的介紹這個遊戲完成過程。 1.檔

Android實現動畫效果之淡入淡出

QQ群：372135639 View漸隱動畫效果 /** * View漸隱動畫效果 */ public void setHideAnimation( View view, int duration) {

Android動畫效果之Frame Animation（逐幀動畫）

想要 顯示 star 載體 rop 復雜 ide sources post 前言： 上一篇介紹了Android的Tween Animation（補間動畫） Android動畫效果之Tween Animation（補間動畫），今天來總結下Android的另外一種動

css動畫效果：實現鼠標移入菜單欄文字下出現下劃線

boa 代碼 active lock osi int 事件 type 添加 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

java簡單動畫效果的實現（2）

簡單的java隨機數 java兩種隨機數生成方式（均為偽隨機）： 1.Math.random（） 生成0-1之間的隨機數，取0不取1； 2. Random ra=new Random(x); int result=ra.nextInt(y); x是種子，給的

Android酷炫動畫效果之進度載入動畫

package com.eftimoff.androipathview; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android

Animation動畫效果的實現

佈局動畫介紹 佈局動畫和逐幀動畫是由本質的不同的，逐幀動畫是一幀幀圖片組成的，而佈局動畫是漸變動畫，OPhone通過改變UI的屬性（大小、位置、透明度等）來實現動畫效果。 在OPhone顯示系統中，每個view都對應一個矩陣來控制該view顯示的位置，通過不同的方式來改變該控制矩陣就可以實現動

Android動畫效果之自定義ViewGroup添加布局動畫

前言：      前面幾篇文章介紹了補間動畫、逐幀動畫、屬性動畫，大部分都是針對View來實現的動畫，那麼該如何為了一個ViewGroup新增動畫呢？今天結合自定義ViewGroup來學習一下佈局動畫。本文將通過對自定義圖片選擇控制元件設定動畫為例來學習佈局動畫。      其他幾種動畫效果：  自定義

Shader特效——“幀動畫效果”的實現 【GLSL】

參考自：https://www.shadertoy.com/view/lsX3Rr iChannel0是一幅由一系列連貫動作的彩虹貓組成的影象，如下圖所示 ichannel1是任意一副背景影象

css動畫效果：實現滑鼠移入選單欄文字下出現下劃線

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

jQuery中animate（）動畫效果的實現

$(function () {      $("#box").animate({top:500,left:400},3000).delay(2000); //花3秒的時間從初始位置漂移到指定位

Android酷炫動畫效果之3D星體旋轉效果

  在Android中，如果想要實現3D動畫效果一般有兩種選擇：一是使用Open GL ES，二是使用Camera。Open GL ES使用起來太過複雜，一般是用於比較高階的3D特效或遊戲，並且這個也不是開源的，像比較簡單的一些3D效果，使用Camera就足夠了。   一些

Masonry簡單動畫效果的實現-新

iOS開發在frame定位的時代，如果要想實現簡單的移動動畫，只需在下面這個方法的block裡重寫frame就可以實現 [UIViewanimateWithDuration:0.5 animations:^{        //在這重寫frame  }]; 而在aut

iOS幾種動畫效果的實現

做過一個專案，裡面涉及到的動畫效果比較多，在這裡做個小小的總結。 直線動畫效果 實現一個物體在某段時間從一個點移動到另一個點。 效果如下： 動畫相關程式碼如下： 動畫模型： @interface AnimationModel : NSOb

Android之實現倒計時的那點事兒

前言 LZ-Says：今天收到轉正通知了，內心也就1~2s開心，隨之而來的就是不平不淡。16年10月18號入職，感覺一切都好像眨眼之間，過得好快，各種忙~ 答應了自己，要好好努力。答應了家人，要好好奮鬥。答應了心，要好好堅持。有什麼理由不去努力 開始正題 好吧，今天一起回顧下，關於Android中實現

css動畫效果之transition（動畫效果屬性）

狀態 ani rdquo 動效 無限 doctype sta name style <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

用css3和canvas實現的蜂窩動畫效果

image() all nim 自己 clas 函數 顯示 var 不兼容 近期工作時研究了一下css3動畫和js動畫。主要是工作中為了增強頁面的趣味性，大家都有意無意的加入了非常多動畫效果。當然大部分都是css3動畫效果。能夠gpu加速，這會降低移動端的性能需求。 今

[js高手之路] html5 canvas教程 - 制作一個數碼倒計時效果

[0 2017年 需要 false image 之路 pla left query 效果圖： 這個實例主要註意: 1，剩余時間的計算 2，每個時間數字的繪制 時間主要有0-9和一個冒號組成，用數組來表示( 0: 就是不畫圓，1：就是畫一個藍色的圓 ) num.