JS實現雪花飄落特效效果
阿新 • • 發佈：2018-11-24
1、概述：
以任意圖片作為背景，在背景上新增雪花下落的特效效果，此處使用隨機顏色、隨機大小的彩色雪花實現。
2、效果實現功能：
（1）雪花隨機出現並隨機消失；
（2）雪花出現時大小隨機；
（3）雪花顏色隨機；
（4）雪花顏色逐漸變淡並消失；
（5）雪花消失後刪除其物件，減輕系統負擔。
3、實現原理：
採用<canvas></canvas>畫布標籤實現，在畫布上完成背景圖片的新增，使用物件創建出雪花的模型，在定義的畫布上用畫筆功能，根據雪花物件構建的模板畫出所需數量的雪花，並將畫出的雪花的透明度和分別遞減和遞增，任意雪花透明度為小於0時，再隨機位置創建出新的雪花。
4、完整實現程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>螢幕雪花效果練習</title> <style type="text/css"> *{margin:0;padding:0;} canvas{background: url(images/snow.jpg) no-repeat;background-size: 100% 100%;overflow: hidden;} </style> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript"> /** * 定義<canvas>畫布; * @type {[type]} */ var width=window.innerWidth;//獲取系統顯示寬度; var height=window.innerHeight;//獲取系統顯示高度; var canvas=document.querySelector("#canvas"); var context=canvas.getContext("2d"); var snowArray=[];//宣告一個數組，用於存放創建出來的雪花物件； canvas.width=width;//設定畫布的寬度為系統顯示寬度; canvas.height=height;//設定畫布的高度為系統顯示高度; cartoon(); //呼叫動畫; /** * 定義雪花類; */ class Snowflake{ constructor(){ this.init();//建構函式，呼叫定義好的init()方法; } init(){ this.position={ //雪花物件的位置; x:Math.random()*width,//x座標隨機; y:Math.random()*height,//y座標隨機; } this.speed=Math.random()*10;//雪花下落速度為0-10以內的隨機數; this.r=Math.random()*6;//雪花的半徑為0-6以內的隨機數; this.transparency=Math.random();//設定雪花的透明度為隨機; this.color={ r1:Math.random()*255,//雪花顏色隨機; g:Math.random()*255, b:Math.random()*255, } } draw(){//雪花繪製方法; this.position.y++;//y座標每次遞增1畫素; this.transparency-=0.01;//透明度每次遞減0.01; if(this.transparency<=0){//透明度小於0，即雪花消失，重新繪製雪花; this.init(); } context.beginPath();//開始一個新的圖形繪製; context.fillStyle="rgba("+this.color.r1+","+this.color.g+","+this.color.b+","+this.transparency+")";//根據類模型繪製圓形雪花; context.arc(this.position.x,this.position.y,this.r,0,Math.PI*2);//填充雪花的顏色; context.fill(); } } for(var i=0;i<1000;i++){ var snow=new Snowflake();//例項化1000個雪花物件; snowArray.push(snow);//將雪花物件新增到陣列中; } // var length=snowArray.length; /** * 定義動畫效果; * @return {[type]} [description] */ function cartoon(){ context.clearRect(0,0,width,height);動畫完成一次進行清屏操作; for(var j=0;j<snowArray.length;j++){ snowArray[j].draw();//將例項化好的每個雪花物件在畫布上畫出來; } requestAnimationFrame(cartoon);//遞迴呼叫動畫效果; } </script> </body> </html>
5、注意事項：
動畫效果定義完成後必須在js程式碼塊中進行呼叫，這裡的動畫使用了requestAnimationFrame(cartoon);方法來遞迴反覆呼叫動畫，不需要設定定時器即可隨時重新整理，該方法比定時器 setTimeout/setInterval的優勢在於，在執行時瀏覽器會自動優化方法的呼叫，並且如果頁面不是啟用狀態下的話，動畫會自動暫停，減輕CPU壓力。