示例代碼托管在： "http://www.github.com/dashnowords/blogs" 博客園地址： "《大史住在大前端》原創博文目錄" 華為雲社區地址： "【你要的前端打怪升級指南】" [TOC] 一. 文字煙花 文字煙花的小控制項是下麵這樣的效果，你或許在很多個人博客中見過： 這一節 ...
目錄
示例代碼托管在：http://www.github.com/dashnowords/blogs
博客園地址：《大史住在大前端》原創博文目錄
華為雲社區地址：【你要的前端打怪升級指南】
一. 文字煙花
文字煙花的小控制項是下麵這樣的效果，你或許在很多個人博客中見過：
這一節我們就來講述一下這個小動畫的實現方法。
二. 動畫原理
首先動畫的主框架仍然是我們反覆使用的逐幀動畫框架，煙花生成以後的部分也不難理解，我們之前已經對物理碰撞進行過模擬，這裡實際上就是模擬了帶有初速度的自由落體。所以這個小動畫里唯一的難點，就是如何根據文字生成煙花，只要做到這一步，其他的部分都比較容易實現。
2.1 像素操作
這裡就要用到canvas像素操作的API——context.getImageData( )了，它可以將畫布上指定矩形區域以像素點的形式返回回來，像素數據掛載在返回對象的data屬性上，它是一個一維的Uint8ClampedArray定型數組，每個值只能取0-255之間的整數，如果賦值超過這個範圍，則自動修改為[0,255]而不會報錯。這個一維數組是矩形區域的像素點數據逐行拼接在一起的，每4個點代表一個像素點的RGBA的顏色數據，最後一個通道是透明度數據，例如一個紅色的像素點的數據就是[...,255,0,0,0....]。比如你截取了一個長為200像素高為10像素的矩形區域的數據點，那麼就會得到一個200*10*4=8000個數據點的數組。
這是canvas非常重要的一個API，它的應用場景非常多，例如結合WebRTC輸入的流數據來做視頻彈幕，或者使用演算法對像素數據進行加工實現各種各樣的圖片濾鏡等，還可以使用離屏canvas來進行性能提升，具體的應用就留給你自己去探索嘍。
2.2 煙花生成演算法
獲取到像素數據後，我們就可以對其進行分析，分析演算法如下：
- 將要獲取像素的部分分成大小適中的網格，網格太小則渲染壓力大，網格太大動畫效果不好。
- 遍歷每一個網格，取出小方塊區域內所有像素點，也可以一次性讀取整個區域的像素點然後按小區域來取用，然後統計其中
dirty的像素點數量（判斷其對應的顏色值是否都為255，如果不是則判定為dirty），如果區域內臟點的比例超過一定閾值（示例中為60%）則判定該區域需要被煙花點替換。 - 在需要生成煙花的區域以隨機大小和顏色生成一個小球，並根據其位置指定水平初速度的方向，小球均受到豎直向下的重力影響。
- 在幀動畫中更新小球狀態。
2.3 計時器
最後，我們還需要一個新的timer對象，之前我們接觸到的精靈動畫大都是連續的，每一幀都需要進行狀態更新，而本節中時間文字的更新是離散的，一秒鐘才更新一次，煙花由於有動畫過程，也不太適合每秒都生成。所以我們需要在timer中實現一個內部計時器，每1秒更新一次渲染文字，每2秒觸發一次。如果對時間精度要求較高，可以記錄時間戳進行比對，如果精度要求不高，可以在update方法中遞增直接對更新周期進行取模即可。
Timer類的定義如下：
//計時器類
class Timer{
constructor(){
this.lastTime = Date.now(); //初始化的時候記錄一次時間
this.label = new Date(this.lastTime).Format('hh:mm:ss');//Format是自定義的格式化方法
this.step = 0;//標記是否刷新時間文字
this.shouldAnim = 0;//標記是否需要生成新的煙花
}
update(){
this.step = (this.step + 1) % 60;//時間文字每60幀刷新一次
this.shouldAnim = (this.shouldAnim + 1) % 120;//煙花每120幀生成一次
if (!this.step) {
this.lastTime = Date.now();
this.label = new Date(this.lastTime).Format('hh:mm:ss');
}
}
paint(ctx){
context.fillStyle = "#353535";
ctx.fillText(this.label, 200, 100);
}
}主框架部分的代碼已經講過非常多次，本文不再贅述。
