-NJUPT-網(wǎng)頁設(shè)計大賽總結(jié)

Catalog:—總體感想

—如何用canvas畫圖

—關(guān)于頁面緩動跳轉(zhuǎn)的探索

——-CSS3動畫

——-緩動函數(shù)

—用HTML5自定義屬性Dataset實現(xiàn)自定義信息儲存

—從老司機那里學(xué)到的產(chǎn)品開發(fā)版本問題

—后期學(xué)習(xí):

——-自適應(yīng)調(diào)節(jié)問題總體感想因為決定以后做前端方向的工作,所以把參加這次比賽的初衷確定為學(xué)習(xí)網(wǎng)頁搭建的基本流程,和小伙伴一起決定不使用UI框架,手?jǐn)]了一個網(wǎng)頁出來,網(wǎng)頁內(nèi)容是天文社團的主頁,但是問題同樣嚴(yán)重,遇到不少坑,也想了不少辦法解決,最后還是差強人意,但是對我來說經(jīng)驗的積累和總結(jié)更重要,接下來同樣要學(xué)習(xí)更多的姿勢,不管怎樣感謝隊友的包容和努力,我在這里對這次比賽學(xué)到的東西進行總結(jié),再加上結(jié)束后學(xué)習(xí)到的一些東西,包括自適應(yīng)和CSS的布局;然后接下來可能會把學(xué)習(xí)重點放到JS上。如何用canvas畫圖使用canvas的初衷是我們打算用好看的動畫作為背景,后來因為掉幀嚴(yán)重,優(yōu)化不來放棄這個方案,但是同樣在其中學(xué)習(xí)到用canvas畫圖的樂趣。最開始我們實現(xiàn)的是這樣背景效果；

實現(xiàn)JS代碼如下:varcontext;varstarsnum=150;//星星數(shù)量varmouse_pre={x:0,y:0};varmouse_cur={x:0,y:0};varflag=true;varstarArr=[];//儲存每一個星星的位置varmovArrX=[];//儲存移動變化的因子varmovArrY=[];functionrandom(lo,hi){//隨機獲得從lo-hi的整數(shù)returnMath.floor(Math.random()*(hi-lo+1)+lo);}functioninit(){//初始化canvas=document.getElementById("canvas");context=canvas.getContext("2d");canvas.width=window.innerWidth;canvas.height=window.innerHeight;canvas.style.cssText="top:0";for(vari=0;i<starsnum;i++){x=random(0,canvas.width);y=random(0,canvas.height);r=1;varnewStar=drawCirle(context,x,y,r);starArr.push(newStar);varmov_arrX=random(-1,1);varmov_arrY=random(-1,1);while(mov_arrX==0||mov_arrY==0){mov_arrX=random(-1,1);mov_arrY=random(-1,1);}movArrX.push(mov_arrX/5);movArrY.push(mov_arrY/5);}for(varj=0;j<starsnum;j++){for(vark=j;k<starsnum;k++){varbx=starArr[j].centerX;varby=starArr[j].centerY;varcx=starArr[k].centerX;varcy=starArr[k].centerY;vardis=Math.sqrt(Math.abs(cx-bx)*Math.abs(cx-bx)+Math.abs(by-cy)*Math.abs(by-cy));if(dis<0.045*(canvas.width+canvas.height)/2){drawLine(context,bx,by,cx,cy);}}}//window.addEventListener('mousemove',mouseMove,false);//鼠標(biāo)移動監(jiān)控render();}//functionmouseMove(event){//鼠標(biāo)移動事件////if(flag){////mouse_pre.x=event.screenX;////mouse_pre.y=event.screenY;////flag=false;////}//mouse_cur.x=event.screenX;//mouse_cur.y=event.screenY;//render();//mouse_pre.x=mouse_cur.x;//mouse_pre.y=mouse_cur.y;//}functionrender(){context.clearRect(0,0,canvas.width,canvas.height);//dx=mouse_cur.x-mouse_pre.x;//dy=mouse_cur.y-mouse_pre.y;for(vari=0;i<starsnum;i++){varchangeStar=starArr[i];changeStar.centerX+=movArrX[i];changeStar.centerY+=movArrY[i];if(changeStar.centerX>canvas.width||changeStar.centerX<0){movArrX[i]=-movArrX[i];}if(changeStar.centerY>canvas.height||changeStar.centerY<0){movArrY[i]=-movArrY[i];}drawCirle(context,changeStar.centerX,changeStar.centerY,changeStar.radius);starArr[i]=changeStar;}for(varj=0;j<starsnum;j++){for(vark=j;k<starsnum;k++){varbx=starArr[j].centerX;varby=starArr[j].centerY;varcx=starArr[k].centerX;varcy=starArr[k].centerY;vardis=Math.sqrt(Math.abs(cx-bx)*Math.abs(cx-bx)+Math.abs(by-cy)*Math.abs(by-cy));if(dis<0.045*(canvas.width+canvas.height)/2){drawLine(context,bx,by,cx,cy);}}}window.requestAnimationFrame(render);}functiondrawCirle(ctx,x,y,r){//在(x,y)處畫半徑為r的圓functionCircle(x,y,r){this.centerX=x;this.centerY=y;this.radius=r;}varcircle=newCircle(x,y,r);ctx.beginPath();ctx.arc(circle.centerX,circle.centerY,circle.radius,0,Math.PI*2,true);ctx.fillStyle="rgba(255,255,255,1)";ctx.fill();ctx.closePath();returncircle;}functiondrawLine(ctx,bx,by,cx,cy){//用直線把(bx,by)到(cx,cy)連起來functionLine(bx,by,cx,cy){this.beginX=bx;this.beginY=by;this.closeX=cx;this.closeY=cy;}varline=newLine(bx,by,cx,cy);ctx.beginPath();ctx.moveTo(line.beginX,line.beginY);ctx.lineTo(line.closeX,line.closeY);ctx.stroke();ctx.lineWidth=1;ctx.strokeStyle="rgba(255,255,255,0.3)"ctx.closePath();}init();這里我簡單對代碼進行分析,首先是starsnum表示星星的總數(shù),再用starArr[]對象數(shù)組來儲存每個星星的位置,因為星星是自己移動的所以給星星一個初始的移動距離,用movArrX[]和movArrY[]分別表示在X,Y方向上的移動因子,注意在瀏覽器窗口中坐標(biāo)軸的位置,以左上角為坐標(biāo)原點,向下為Y軸正半軸,向右為X軸正半軸;接下來是初始化函數(shù),在初始化函數(shù)中用context=canvas.getContext("2d");來新建一個畫布,window.innerWidth和window.innerHeight分別表示瀏覽器的寬高;然后隨機星星的位置,半徑為1,調(diào)用drawCirle()函數(shù)來畫出一個星星;

在畫星星的函數(shù)中beginPath()和closePath()表示畫圖的操作寫在里面,arc()表示畫出弧,然后在參數(shù)中Math.PI*2表示弧的長度為圓的周長,也就是畫出一個圓,然后用fillStyle和fill()填充圓,這樣一個星星就畫好了;

星星畫好后把這個星星放入starArr數(shù)組中,再隨機mov_arrX和mov_arrY每個星星初始時在X,Y方向上的每次的移動因子,可以通過這個來控制移動的速度快慢;

之后是連線,連線就是在兩個點的距離小于某個值時把兩個點連線,關(guān)于判斷兩個點的距離我就不說了,我說說調(diào)用的drawLine()畫線函數(shù),同畫星星那樣,用beginPath()和closePath()表示畫圖操作區(qū)域,moveTo()和lineTo()表示線起點位置和終點位置,stroke()表示開始畫線,strokeStyle表示樣式,這樣線也連起來了;

下面是最重要的render()函數(shù),在函數(shù)中我們重新畫整幅圖,把每個星星的位置加上他們的移動因子,就是他們接下來的位置,然后重新判斷是否連線,然后用window.requestAnimationFrame(render)回調(diào)render(),這樣實現(xiàn)連續(xù)的作畫,關(guān)于為何使用requestAnimationFrame()而不是使用setTimeout()可以參見這篇博客主要是因為瀏覽器的顯示頻率即繪制頻率和requestAnimationFrame()同步,而setTimeout()需要自己調(diào)整,很容易出問題,最開始就是這么用的導(dǎo)致掉幀嚴(yán)重,就舍棄了這個方案,也還有隊友博客中提到的每次都重畫整個畫布會有較大的資源占用。除了這個背景我們還看了這里的demo5和demo7這種背景,但是隊友覺得不好看也就沒用上,其中畫圖的思路大同小異,就看自己的創(chuàng)造力了,還是相當(dāng)有難度的,特別是我看到demo4是一個3D的效果,以后或許會認真看看,學(xué)習(xí)學(xué)習(xí)；關(guān)于頁面緩動跳轉(zhuǎn)的探索因為沒打算用UI框架,所以關(guān)于緩動這一塊可是想了好久,首先是元素緩動使用CSS3動畫,也就是在CSS里面綁定變化,然后用@keyframes規(guī)則創(chuàng)建動畫。在@keyframes中規(guī)定某項CSS樣式,就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果。CSS中綁定,寫上綁定哪個和動畫時間：div{animation:myfirst5s;-moz-animation:myfirst5s;/*Firefox*/-webkit-animation:myfirst5s;/*Safari和Chrome*/-o-animation:myfirst5s;/*Opera*/}寫上變化的樣式和怎么變化:@keyframesmyfirst{from{background:red;}to{background:yellow;}}@-moz-keyframesmyfirst/*Firefox*/{from{background:red;}to{background:yellow;}}@-webkit-keyframesmyfirst/*Safari和Chrome*/{from{background:red;}to{background:yellow;}}@-o-keyframesmyfirst/*Opera*/{from{background:red;}to{background:yellow;}}其中還可以調(diào)整動畫的方式,比如:linear動畫從頭到尾的速度是相同的。ease默認。動畫以低速開始,然后加快,在結(jié)束前變慢。ease-in動畫以低速開始。ease-out動畫以低速結(jié)束。ease-in-out動畫以低速開始和結(jié)束?；蚴亲远x貝塞爾曲線:cubic-bezier(n,n,n,n)在cubic-bezier函數(shù)中自己的值?？赡艿闹凳菑?到1的數(shù)值。除了元素緩動,我們還思考如何實現(xiàn),滑輪滾動一下自動滑動到,在這里使用CSS3動畫就不太好辦了,所以我們找到了緩動函數(shù)Tween();其實緩動的思路可以參照之前說的畫布畫圖,也就是通過回調(diào)函數(shù)重新繪制整個頁面,再通過特定的更新函數(shù)來調(diào)整緩動的方式,也就是CSS3動畫里的幾種動畫方式都有對應(yīng)的函數(shù)實現(xiàn)。這是Tween()的代碼:/*tweenjs*t:currenttime(當(dāng)前時間)*b:beginningvalue(初始值)*c:changeinvalue(變化量)*d:duration(持續(xù)時間）*/varTween={Linear:function(t,b,c,d){returnc*t/d+b;},Quad:{easeIn:function(t,b,c,d){returnc*(t/=d)*t+b;},easeOut:function(t,b,c,d){return-c*(t/=d)*(t-2)+b;},easeInOut:function(t,b,c,d){if((t/=d/2)<1)returnc/2*t*t+b;return-c/2*((--t)*(t-2)-1)+b;}},Cubic:{easeIn:function(t,b,c,d){returnc*(t/=d)*t*t+b;},easeOut:function(t,b,c,d){returnc*((t=t/d-1)*t*t+1)+b;},easeInOut:function(t,b,c,d){if((t/=d/2)<1)returnc/2*t*t*t+b;returnc/2*((t-=2)*t*t+2)+b;}},Quart:{easeIn:function(t,b,c,d){returnc*(t/=d)*t*t*t+b;},easeOut:function(t,b,c,d){return-c*((t=t/d-1)*t*t*t-1)+b;},easeInOut:function(t,b,c,d){if((t/=d/2)<1)returnc/2*t*t*t*t+b;return-c/2*((t-=2)*t*t*t-2)+b;}},Quint:{easeIn:function(t,b,c,d){returnc*(t/=d)*t*t*t*t+b;},easeOut:function(t,b,c,d){returnc*((t=t/d-1)*t*t*t*t+1)+b;},easeInOut:function(t,b,c,d){if((t/=d/2)<1)returnc/2*t*t*t*t*t+b;returnc/2*((t-=2)*t*t*t*t+2)+b;}},Sine:{easeIn:function(t,b,c,d){return-c*Math.cos(t/d*(Math.PI/2))+c+b;},easeOut:function(t,b,c,d){returnc*Math.sin(t/d*(Math.PI/2))+b;},easeInOut:function(t,b,c,d){return-c/2*(Math.cos(Math.PI*t/d)-1)+b;}},Expo:{easeIn:function(t,b,c,d){return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b;},easeOut:function(t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;},easeInOut:function(t,b,c,d){if(t==0)returnb;if(t==d)returnb+c;if((t/=d/2)<1)returnc/2*Math.pow(2,10*(t-1))+b;returnc/2*(-Math.pow(2,-10*--t)+2)+b;}},Circ:{easeIn:function(t,b,c,d){return-c*(Math.sqrt(1-(t/=d)*t)-1)+b;},easeOut:function(t,b,c,d){returnc*Math.sqrt(1-(t=t/d-1)*t)+b;},easeInOut:function(t,b,c,d){if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;returnc/2*(Math.sqrt(1-(t-=2)*t)+1)+b;}},Elastic:{easeIn:function(t,b,c,d,a,p){vars;if(t==0)returnb;if((t/=d)==1)returnb+c;if(typeofp=="undefined")p=d*.3;if(!a||a<Math.abs(c)){s=p/4;a=c;}else{s=p/(2*Math.PI)*Math.asin(c/a);}return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;},easeOut:function(t,b,c,d,a,p){vars;if(t==0)returnb;if((t/=d)==1)returnb+c;if(typeofp=="undefined")p=d*.3;if(!a||a<Math.abs(c)){a=c;s=p/4;}else{s=p/(2*Math.PI)*Math.asin(c/a);}return(a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b);},easeInOut:function(t,b,c,d,a,p){vars;if(t==0)returnb;if((t/=d/2)==2)returnb+c;if(typeofp=="undefined")p=d*(.3*1.5);if(!a||a<Math.abs(c)){a=c;s=p/4;}else{s=p/(2*Math.PI)*Math.asin(c/a);}if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;returna*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b;}},Back:{easeIn:function(t,b,c,d,s){if(typeofs=="undefined")s=1.70158;returnc*(t/=d)*t*((s+1)*t-s)+b;},easeOut:function(t,b,c,d,s){if(typeofs=="undefined")s=1.70158;returnc*((t=t/d-1)*t*((s+1)*t+s)+1)+b;},easeInOut:function(t,b,c,d,s){if(typeofs=="undefined")s=1.70158;if((t/=d/2)<1)returnc/2*(t*t*(((s*=(1.525))+1)*t-s))+b;returnc/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b;}},Bounce:{easeIn:function(t,b,c,d){returnc-Tween.Bounce.easeOut(d-t,0,c,d)+b;},easeOut:function(t,b,c,d){if((t/=d)<(1/2.75)){returnc*(7.5625*t*t)+b;}elseif(t<(2/2.75)){returnc*(7.5625*(t-=(1.5/2.75))*t+.75)+b;}elseif(t<(2.5/2.75)){returnc*(7.5625*(t-=(2.25/2.75))*t+.9375)+b;}else{returnc*(7.5625*(t-=(2.625/2.75))*t+.984375)+b;}},easeInOut:function(t,b,c,d){if(t<d/2){returnTween.Bounce.easeIn(t*2,0,c,d)*.5+b;}else{returnTween.Bounce.easeOut(t*2-d,0,c,d)*.5+c*.5+b;}}}}Math.tween=Tween;可以直接在需要調(diào)用的時候傳入?yún)?shù)進行使用。functionto_right(){//向右緩動varwid=wrapper.offsetWidth;console.log(wrapper.offsetWidth);varafter=document.body.clientWidth*0.08;console.log(document.body.clientWidth);varstart=0;varduring=10;tween_to_right=function(){start++;varchange=Tween.Quart.easeOut(start,wid,after-wid,during);wrapper.style.width=change+"px";if(start<during)requestAnimationFrame(tween_to_right);else{pic_to_left.style.display="block";pic_to_right.style.display="none";wrapper.style.backgroundImage="none";}};tween_to_right();box.style.display="none";}這里是我使用到一段元素向右緩動的函數(shù),可以看到同樣是使用到了requestAnimationFrame(),這里對需要改變的元素進行累計,這里就是寬度,然后每次更新后進行回調(diào),從而實現(xiàn)緩動的效果。調(diào)用語句是Tween.Quart.easeOut(start,wid,after-wid,during);;用HTML5自定義屬性Dataset實現(xiàn)自定義信息儲存這里使用HTML5自定義屬性Dataset實現(xiàn)自定義信息儲存

就是記錄上方的按鈕點擊的信息,記錄對應(yīng)按鈕的開關(guān)。我們看著代碼進行講解;<inputtype="button"class="active"id="btn1"data-index="1"/><inputtype="button"class="before_active"id="btn2"data-index="0"/><inputtype="button"class="before_active"id="btn3"data-index="0"/><inputtype="button"class="before_active"id="btn4"data-index="0"/>可以看到這里有四個按鈕,每個按鈕有對應(yīng)的id,和初始時他們的類分別為active表示選中這個按鈕的CSS,before_active表示不選中這個按鈕CSS,還有就是我這邊想到的用HTML5自定義屬性Dataset。先簡單介紹下Dataset當(dāng)然也可以參考大牛的博客,data-前綴用來儲存你想儲存數(shù)據(jù),用dataset.前綴在JS中來取到數(shù)據(jù)。

示例:<divid="day2-meal-expense"data-drink="coffee"data-food="sushi"data-meal="lunch">￥20.12</div>varexpenseday2=document.getElementById('day2-meal-expense');vartypeOfDrink=expenseday2.dataset.drink;這里的typeOfDrink就是"coffee"接下來我說說我是怎么用它實現(xiàn)儲存信息的。

這里是JS代碼:varbox=document.getElementById('box');varinput=box.getElementsByTagName('input');vardiv=box.getElementsByTagName('div');varbtn1=document.getElementById("btn1");varbtn2=document.getElementById("btn2");varbtn3=document.getElementById("btn3");varbtn4=document.getElementById("btn4");for(vari=0;i<input.length;i++){input[i].index=i;input[i].onclick=function(){for(vari=0;i<input.length;i++){input[i].className='before_active';div[i].style.display='none';};this.className='active';div[this.index].style.display='block';if(this.index==0){wrapper.style.backgroundColor="rgba(180,151,90,0.3)";btn1.dataset.index=1;btn2.dataset.index=0;btn3.dataset.index=0;btn4.dataset.index=0;}elseif(this.index==1){wrapper.style.backgroundColor="rgba(0,128,128,0.3)";btn1.dataset.index=0;btn2.dataset.index=1;btn3.dataset.index=0;btn4.dataset.index=0;}elseif(this.index==2){btn1.dataset.index=0;btn2.dataset.index=0;btn3.dataset.index=1;btn4.dataset.index=0;wrapper.style.backgroundColor="rgba(13,37,76,0.3)";}elseif(this.index==3){btn1.dataset.index=0;btn2.dataset.index=0;btn3.dataset.index=0;btn4.dataset.index=1;wrapper.style.backgroundColor="rgba(197,195,214,0.3)";}};};可以看到當(dāng)我們注冊點擊事件時,對當(dāng)前的index進行了判斷,然后用dataset.index修改信息的值,初始時是1000當(dāng)點擊到誰就把其值修改為1其他修改為0表示開關(guān),這樣就對當(dāng)前狀態(tài)進行了記錄,我在接下來就用這些信息進行緩動操作,以判斷當(dāng)前默認頁面的值。所以也算極大的方便操作,特別妙的一種方法