小編給大家分享一下HTML5如何開(kāi)發(fā)翻頁(yè)效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),措美網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:措美等地區(qū)。措美做網(wǎng)站價(jià)格咨詢:18980820575

電子書(shū)結(jié)構(gòu)

你一定要時(shí)時(shí)記住，在canvas里繪制的所有信息都無(wú)法被搜索引擎搜到，也無(wú)法由用戶在瀏覽器中搜索到。由于這個(gè)原因，我們?cè)贒OM中顯示文本內(nèi)容，然后由JavaScript來(lái)操控它。所以電子書(shū)的結(jié)構(gòu)非常簡(jiǎn)單：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div id="book">  

  <canvas id="pageflip-canvas"></canvas>  

  <div id="pages">  

    <section>  

      <div> <!-- Any type of contents here --> </div>  

    </section>  

    <!-- More <section>'s here -->  

  </div>  

</div>  

電子書(shū)的結(jié)構(gòu)中包含一個(gè)主容器，它包含所有的頁(yè)面和用來(lái)繪制翻頁(yè)效果的canvas元素。在section元素中包含一個(gè)div元素，它包含了電子書(shū)頁(yè)面的內(nèi)容，我們可以調(diào)整這個(gè)div的寬度而不影響頁(yè)面內(nèi)容的布局。div有固定的寬度，同時(shí)section設(shè)置溢出隱藏，這樣section元素的作用實(shí)際是作為div的水平方向的遮罩。

打開(kāi)電子書(shū)，可以看到一個(gè)背景圖片，它包含紙張的材質(zhì)和書(shū)籍效果。

邏輯

實(shí)現(xiàn)翻頁(yè)效果的代碼并不是很復(fù)雜，但代碼量很大，因?yàn)橛泻芏鄨D形效果需要用代碼實(shí)現(xiàn)。首先我們從代碼中的常量開(kāi)始說(shuō)起，它的使用貫穿整個(gè)程序。

JavaScript Code復(fù)制內(nèi)容到剪貼板

var BOOK_WIDTH = 830;  

var BOOK_HEIGHT = 260;  

var PAGE_WIDTH = 400;  

var PAGE_HEIGHT = 250;  

var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;  

var CANVAS_PADDING = 60;  

CANVAS_PADDING是canvas周圍的留白，這樣在翻頁(yè)的時(shí)候頁(yè)面可以超出書(shū)的尺寸。要注意的是，這里設(shè)置的常量有的也在CSS中設(shè)置了這些值，所以如果你想修改書(shū)的尺寸，同樣需要修改CSS中相應(yīng)的值。

貫穿代碼中的常量，用來(lái)跟蹤鼠標(biāo)交互并繪制翻頁(yè)頁(yè)面

下一步需要為每個(gè)頁(yè)面定義一個(gè)flip對(duì)象，在翻頁(yè)交互過(guò)程中，它會(huì)持續(xù)更新來(lái)反應(yīng)當(dāng)前翻頁(yè)的狀態(tài)。

JavaScript Code復(fù)制內(nèi)容到剪貼板

// Create a reference to the book container element  

var book = document.getElementById( "book" );  

// Grab a list of all section elements (pages) within the book  

var pages = book.getElementsByTagName( "section" );  

for( var i = 0, len = pages.length; i < len; i++ ) {  

    pages[i].style.zIndex = len - i;  

    flips.push( {  

    progress: 1,  

    target: 1,  

    page: pages[i],  

    dragging: false  

  });  

}  

首先我們要保證section元素的z-index被有序的排列，這樣頁(yè)面才可以正確的排序，也就是說(shuō)第一頁(yè)在上面，最后一頁(yè)在最下面。flip對(duì)象最重要的屬性是progress和target值。它們用來(lái)定義翻動(dòng)頁(yè)面折疊的大小，-1表示整頁(yè)翻到左邊，0表示翻到書(shū)的中間位置，+1表示整頁(yè)翻到書(shū)的最右邊。

Progress和target值用來(lái)定義頁(yè)面的折疊量，可以是-1到+1之間的值.

現(xiàn)在每個(gè)頁(yè)面都有自己的flip對(duì)象了，下面我們學(xué)獲取用戶的鼠標(biāo)位置，并根據(jù)這個(gè)值開(kāi)始翻頁(yè)。

JavaScript Code復(fù)制內(nèi)容到剪貼板

function mouseMoveHandler( event ) {  

  // Offset mouse position so that the top of the book spine is 0,0  

  mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );  

  mouse.y = event.clientY - book.offsetTop;  

}  

function mouseDownHandler( event ) {  

  // Make sure the mouse pointer is inside of the book  

  if (Math.abs(mouse.x) < PAGE_WIDTH) {  

    if (mouse.x < 0 && page - 1 >= 0) {  

      // We are on the left side, drag the previous page  

      flips[page - 1].dragging = true;  

    }  

    else if (mouse.x > 0 && page + 1 < flips.length) {  

      // We are on the right side, drag the current page  

      flips[page].dragging = true;  

    }  

  }  

  // Prevents the text selection  

  event.preventDefault();  

}  

function mouseUpHandler( event ) {  

  for( var i = 0; i < flips.length; i++ ) {  

    // If this flip was being dragged, animate to its destination  

    if( flips[i].dragging ) {  

      // Figure out which page we should navigate to  

      if( mouse.x < 0 ) {  

        flips[i].target = -1;  

        page = Math.min( page + 1, flips.length );  

      }  

      else {  

        flips[i].target = 1;  

        page = Math.max( page - 1, 0 );  

      }  

    }  

    flips[i].dragging = false;  

  }  

}  

mouseMoveHandler方法會(huì)實(shí)時(shí)更新mouse對(duì)象的內(nèi)容，這樣我們可以得到鼠標(biāo)的精確位置。

在mouseDonwHandler中，檢測(cè)鼠標(biāo)是在書(shū)的左邊還是右邊按下，記得得知翻頁(yè)的方向。我還需要知道翻頁(yè)方向的下一張是否還有頁(yè)面，因?yàn)槲覀儠?huì)遇到第一頁(yè)或最后一頁(yè)的情況。如果所有的flip選項(xiàng)都有檢測(cè)沒(méi)有問(wèn)題，設(shè)置該flip對(duì)象的dragging屬性為true。

在mouseUpHandler中，我們會(huì)檢測(cè)每個(gè)頁(yè)面是否被拖動(dòng)，如果是則釋放該頁(yè)面的拖動(dòng)。停止拖動(dòng)后，頁(yè)面會(huì)根據(jù)鼠標(biāo)的位置決定是向前翻動(dòng)還是向后翻動(dòng)。同時(shí)頁(yè)面的頁(yè)面也會(huì)被更新，作為頁(yè)面的導(dǎo)航。

渲染

現(xiàn)在大部分的邏輯運(yùn)算都已經(jīng)完成了，下面我們要學(xué)習(xí)如果在canvas元素中渲染折疊的頁(yè)面。這些渲染的效果大部分都在render()方法中完成，這個(gè)方法每秒鐘會(huì)執(zhí)行60次，來(lái)實(shí)時(shí)更新翻動(dòng)頁(yè)面的狀態(tài)。

JavaScript Code復(fù)制內(nèi)容到剪貼板

function render() {  

  // Reset all pixels in the canvas  

  context.clearRect( 0, 0, canvas.width, canvas.height );  

  for( var i = 0, len = flips.length; i < len; i++ ) {  

    var flip = flips[i];  

    if( flip.dragging ) {  

      flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );  

    }  

    // Ease progress towards the target value  

    flip.progress += ( flip.target - flip.progress ) * 0.2;  

    // If the flip is being dragged or is somewhere in the middle  

    // of the book, render it  

    if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {  

      drawFlip( flip );  

    }  

  }  

}  

開(kāi)始渲染之前，用clearRect(x,y,w,h)方法重置canvas。重置整個(gè)canvas畫布會(huì)大大降低運(yùn)行的性能，相比之下，僅僅重置需要重新繪制的部分，效率會(huì)更高。但是為了不偏離本教程的話題，我們還是重置更個(gè)canvas畫布。

如果頁(yè)面正在拖動(dòng)，那么他的target值設(shè)置為鼠標(biāo)坐標(biāo)相對(duì)于電子書(shū)寬度的位置，而不是實(shí)際的像素值。同時(shí)progress也會(huì)一點(diǎn)點(diǎn)增加至target值，這樣翻動(dòng)每幀都會(huì)更新，也就得到了我們看到的頁(yè)面平滑的翻動(dòng)動(dòng)畫效果。

因?yàn)槊恳粠家闅v所有的頁(yè)面，所以我們需要保證只重繪當(dāng)前活動(dòng)的頁(yè)面。如果頁(yè)面翻動(dòng)沒(méi)有很接近書(shū)的邊緣(BOOK_WIDTH的0.3%)，或者頁(yè)面的flagged屬性值是dragging，我們認(rèn)為該頁(yè)面是當(dāng)前活動(dòng)的頁(yè)面。

現(xiàn)在所有的邏輯運(yùn)算都已經(jīng)完成了，下面需要根據(jù)頁(yè)面的當(dāng)前狀態(tài)繪制翻動(dòng)頁(yè)面效果。我們來(lái)看胰腺癌drawFlip()方法的第一部分。

JavaScript Code復(fù)制內(nèi)容到剪貼板

// Determines the strength of the fold/bend on a 0-1 range  

var strength = 1 - Math.abs( flip.progress );  

// Width of the folded paper  

var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );  

// X position of the folded paper  

var foldX = PAGE_WIDTH * flip.progress + foldWidth;  

// How far outside of the book the paper is bent due to perspective  

var verticalOutdent = 20 * strength;  

// The maximum widths of the three shadows used  

var paperShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(1 - flip.progress, 0.5), 0);  

var rightShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0);  

var leftShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0);  

// Mask the page by setting its width to match the foldX  

flip.page.style.width = Math.max(foldX, 0) + "px";  

這部分的代碼開(kāi)始是一些變量的計(jì)算，它們用來(lái)繪制真實(shí)的頁(yè)面翻動(dòng)效果。Progress變量在這些變量中扮演最重要的角色，因?yàn)樗琼?yè)面要翻動(dòng)到的位置。為了添加深度效果，我們讓頁(yè)面可以超出書(shū)的邊界，當(dāng)頁(yè)面翻動(dòng)至?xí)刮恢脮r(shí)，超出部分達(dá)到了極限。

頁(yè)面翻動(dòng)時(shí)的折疊效果.

現(xiàn)在所有的值都一個(gè)就位，萬(wàn)事俱備，只差繪制頁(yè)面了！

JavaScript Code復(fù)制內(nèi)容到剪貼板

context.save();  

context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );  

// Draw a sharp shadow on the left side of the page  

context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';  

context.lineWidth = 30 * strength;  

context.beginPath();  

context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);  

context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));  

context.stroke();  

// Right side drop shadow  

var rightShadowGradient = context.createLinearGradient(foldX, 0,  

              foldX + rightShadowWidth, 0);  

rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');  

rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');  

context.fillStyle = rightShadowGradient;  

context.beginPath();  

context.moveTo(foldX, 0);  

context.lineTo(foldX + rightShadowWidth, 0);  

context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);  

context.lineTo(foldX, PAGE_HEIGHT);  

context.fill();  

// Left side drop shadow  

var leftShadowGradient = context.createLinearGradient(  

    foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);  

leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');  

leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');  

context.fillStyle = leftShadowGradient;  

context.beginPath();  

context.moveTo(foldX - foldWidth - leftShadowWidth, 0);  

context.lineTo(foldX - foldWidth, 0);  

context.lineTo(foldX - foldWidth, PAGE_HEIGHT);  

context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);  

context.fill();  

// Gradient applied to the folded paper (highlights & shadows)  

var foldGradient = context.createLinearGradient(  

    foldX - paperShadowWidth, 0, foldX, 0);  

foldGradient.addColorStop(0.35, '#fafafa');  

foldGradient.addColorStop(0.73, '#eeeeee');  

foldGradient.addColorStop(0.9, '#fafafa');  

foldGradient.addColorStop(1.0, '#e2e2e2');  

context.fillStyle = foldGradient;  

context.strokeStyle = 'rgba(0,0,0,0.06)';  

context.lineWidth = 0.5;  

// Draw the folded piece of paper  

context.beginPath();  

context.moveTo(foldX, 0);  

context.lineTo(foldX, PAGE_HEIGHT);  

context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2),  

                         foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);  

context.lineTo(foldX - foldWidth, -verticalOutdent);  

context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);  

context.fill();  

context.stroke();  

context.restore();  

在canvas的API中tranlate(x,y)方法用來(lái)移動(dòng)畫布的坐標(biāo)系統(tǒng)，以便于我們可以以書(shū)脊的頂端作為(0,0)原點(diǎn)來(lái)繪制翻動(dòng)的頁(yè)面。注意，我們需要使用save()方法保存當(dāng)前canvas的變換，變換完成后調(diào)用restore()方法。

繪制翻動(dòng)頁(yè)面的起始點(diǎn)，同translate(x,y)方法，將其從canvas的左上角移動(dòng)到書(shū)脊頂端，這樣簡(jiǎn)化了繪制的邏輯

foldGradient方法用來(lái)填充折疊的頁(yè)面，同時(shí)繪制真實(shí)的高光和陰影效果。同時(shí)我還為頁(yè)面繪制了一條很窄的黑邊，防止在較亮的背景下頁(yè)面“消失”。

現(xiàn)在剩下的就是用我們前面定義的變量繪制折疊的頁(yè)面。頁(yè)面左右兩側(cè)用直線繪制，頂部和底部繪制彎曲的曲線，產(chǎn)生一種紙張折疊的感覺(jué)。頁(yè)面的折疊程度由verticalOutdent值決定。

以上是“HTML5如何開(kāi)發(fā)翻頁(yè)效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱：HTML5如何開(kāi)發(fā)翻頁(yè)效果
路徑分享：http://m.rwnh.cn/article18/gdddgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、建站公司、品牌網(wǎng)站設(shè)計(jì)、云服務(wù)器、商城網(wǎng)站、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)