Bootstrap

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
            }
        }
  1. 流星星体光环的闪烁特效
        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
;