JavaScript canvas實現流星特效
本文實例為大傢分享瞭JavaScript canvas實現流星特效展示的具體代碼,供大傢參考,具體內容如下
1、控制透明度變化函數
function easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = x*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } //用平方根構建的緩慢減速運動 核心函數:x*x + 2*x function easeOutQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = -x*x + 2*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } function easeInoutQuad(curtime,begin,end,duration){ if(curtime<duration/2){ //前半段時間 return easeInQuad(curtime,begin,(begin+end)/2,duration/2);//改變量和時間都除以2 }else{ let curtime1 = curtime-duration/2; //註意時間要減去前半段時間 let begin1 = (begin+end)/2;//初始量要加上前半段已經完成的 return easeOutQuad(curtime1,begin1,end,duration/2);//改變量和時間都除以2 } }
2、流星星體光環的閃爍特效
function intervalOpcity (cur=0,start=0.3,end=0.8,dur=3) { if(fadeOpcity(cur,start,end,dur)===end){ cur = 0 let temp = start start = end end = temp } let opcity = fadeOpcity(cur,start,end,dur) let color = `rgba(0,0,0,${opcity})` clearBgcolor(wrap) newParticle (wrap,[x,y],r,color) cur=parseFloat(cur+0.1) setTimeout(()=>{intervalOpcity (cur,start,end,dur)},33) }
3、流星尾巴
function intervalMove (speed,g=0) { if(g===720){ g = 360 } g = g+speed let nextPosition = movePosition (a,g,startPosition) x = nextPosition[0] y = nextPosition[1] clearBgcolor(wrap1) for(let i =1;i<=360;i++){ let g1 = g-i/2 if(g1<0&&g<=360){ break } let g1Position = movePosition (a,g1,startPosition) newParticle (wrap1,[g1Position[0],g1Position[1]],r/(1+i/5),`rgba(255,200,200,0.5)`) } setTimeout(()=>{intervalMove (speed,g)},33) }
4、完整代碼
function easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = x*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } //用平方根構建的緩慢減速運動 核心函數:x*x + 2*x function easeOutQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = -x*x + 2*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } function easeInoutQuad(curtime,begin,end,duration){ if(curtime<duration/2){ //前半段時間 return easeInQuad(curtime,begin,(begin+end)/2,duration/2);//改變量和時間都除以2 }else{ let curtime1 = curtime-duration/2; //註意時間要減去前半段時間 let begin1 = (begin+end)/2;//初始量要加上前半段已經完成的 return easeOutQuad(curtime1,begin1,end,duration/2);//改變量和時間都除以2 } } function newCanvas (width,height) { let bodyEl = document.body let canvasEl = document.createElement("canvas") canvasEl.width = width canvasEl.height = height canvasEl.style.position = "absolute" bodyEl.append(canvasEl) let wrap = canvasEl.getContext("2d") return wrap } function setBgcolor (wrap,color) { wrap.fillStyle=color; wrap.fillRect(0,0,wrap.canvas.width,wrap.canvas.height); } function clearBgcolor(wrap){ wrap.clearRect(0,0,wrap.canvas.width,wrap.canvas.height) } function newParticle (wrap,position,r,color) { let x = position[0] let y = position[1] wrap.fillStyle=color; wrap.beginPath(); wrap.arc(x,y,r,0,2*Math.PI); wrap.shadowBlur=20; wrap.shadowColor=`rgba(255,255,255,0.8)`; wrap.fill(); } function fadeOpcity(cur,start,end,dur){ let opcity = parseFloat(easeInoutQuad(cur,start,end,dur).toFixed(2)) return opcity } let wrap0 = newCanvas (1000,800) let wrap2 = newCanvas (1000,800) let wrap = newCanvas (1000,800) let wrap1 = newCanvas (1000,800) setBgcolor (wrap0,"black") setBgcolor (wrap,"rgba(0,0,0,0)") setBgcolor (wrap1,"rgba(0,0,0,0)") setBgcolor (wrap2,"rgba(0,0,0,0)") let startPosition = [500,200] let r = 10 let a = -200 let x = a*(1-Math.cos(0))*Math.sin(0)+startPosition[0] let y = a*(1-Math.cos(0))*Math.cos(0)+startPosition[1] function movePosition (a,g,startPosition) { let t = Math.PI*2/360 let x = a*(1-Math.cos(g*t))*Math.sin(g*t)+startPosition[0] let y = a*(1-Math.cos(g*t))*Math.cos(g*t)+startPosition[1] return [x,y] } function intervalMove (speed,g=0) { if(g===720){ g = 360 } g = g+speed let nextPosition = movePosition (a,g,startPosition) x = nextPosition[0] y = nextPosition[1] clearBgcolor(wrap1) for(let i =1;i<=360;i++){ let g1 = g-i/2 if(g1<0&&g<=360){ break } let g1Position = movePosition (a,g1,startPosition) newParticle (wrap1,[g1Position[0],g1Position[1]],r/(1+i/5),`rgba(255,200,200,0.5)`) } setTimeout(()=>{intervalMove (speed,g)},33) } function intervalOpcity (cur=0,start=0.3,end=0.8,dur=3) { if(fadeOpcity(cur,start,end,dur)===end){ cur = 0 let temp = start start = end end = temp } let opcity = fadeOpcity(cur,start,end,dur) let color = `rgba(0,0,0,${opcity})` clearBgcolor(wrap) newParticle (wrap,[x,y],r,color) cur=parseFloat(cur+0.1) setTimeout(()=>{intervalOpcity (cur,start,end,dur)},33) } intervalOpcity () intervalMove (1)
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 基於JavaScript實現動態雨滴特效
- JavaScript+Canvas實現帶跳動效果的粒子動畫
- js+canvas實現代碼雨效果
- JavaScript canvas實現刮刮樂案例
- vue項目中canvas實現截圖功能