HTML5開發的翻頁效果實例

簡介
2010年F-i.com和Google Chrome團隊合力致力於主題為《20 Things I Learned about Browsers and the Web》(www.20thingsilearned.com)的web app的宣傳教育。這個項目最主要的思想是在傳達，用web展現電子書的內容是最合適的選擇。因為展現電子書的內容是前所未有的web技術，我們堅信以現在的技術完全可以用一個容器來展現這樣的例子。

書籍的封面同時也是《20 Things I Learned About Browsers and the Web》的主頁(www.20thingsilearned.com)
我們認為，要實現閱讀真正書籍的感覺最好的方法是模仿書籍的閱讀體驗，同時充分利用電子媒介的優勢如導航。我在書籍的視覺和交互效果上面下了很大的功夫，特別是翻頁的效果。

開始制作
本教程會帶領里學習html5電子書的制作流程，並教你用Canvas元素和JavaScript來制作自己的電子書。關於JavaScript的基礎代碼，如變量聲明和事件偵聽等不在本教程的范圍內，具體請參考實例源代碼。
開始之前，我們還是先看一下demo的效果吧，這樣我們可以有目的行的去學習。

電子書結構
你一定要時時記住，在canvas里繪制的所有信息都無法被搜索引擎搜到，也無法由用戶在瀏覽器中搜索到。由於這個原因，我們在DOM中顯示文本內容，然后由JavaScript來操控它。所以電子書的結構非常簡單：

XML/HTML Code復制內容到剪貼板

<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>

電子書的結構中包含一個主容器，它包含所有的頁面和用來繪制翻頁效果的canvas元素。在section元素中包含一個div元素，它包含了電子書頁面的內容，我們可以調整這個div的寬度而不影響頁面內容的布局。div有固定的寬度，同時section設置溢出隱藏，這樣section元素的作用實際是作為div的水平方向的遮罩。

打開電子書，可以看到一個背景圖片，它包含紙張的材質和書籍效果。
邏輯
實現翻頁效果的代碼並不是很復雜，但代碼量很大，因為有很多圖形效果需要用代碼實現。首先我們從代碼中的常量開始說起，它的使用貫穿整個程序。

JavaScript Code復制內容到剪貼板

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周圍的留白，這樣在翻頁的時候頁面可以超出書的尺寸。要注意的是，這里設置的常量有的也在CSS中設置了這些值，所以如果你想修改書的尺寸，同樣需要修改CSS中相應的值。
 

貫穿代碼中的常量，用來跟蹤鼠標交互並繪制翻頁頁面
下一步需要為每個頁面定義一個flip對象，在翻頁交互過程中，它會持續更新來反應當前翻頁的狀態。

JavaScript Code復制內容到剪貼板

// 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被有序的排列，這樣頁面才可以正確的排序，也就是說第一頁在上面，最后一頁在最下面。flip對象最重要的屬性是progress和target值。它們用來定義翻動頁面折疊的大小，-1表示整頁翻到左邊，0表示翻到書的中間位置，+1表示整頁翻到書的最右邊。

 

Progress和target值用來定義頁面的折疊量，可以是-1到+1之間的值.
現在每個頁面都有自己的flip對象了，下面我們學獲取用戶的鼠標位置，並根據這個值開始翻頁。

JavaScript Code復制內容到剪貼板

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方法會實時更新mouse對象的內容，這樣我們可以得到鼠標的精確位置。

在mouseDonwHandler中，檢測鼠標是在書的左邊還是右邊按下，記得得知翻頁的方向。我還需要知道翻頁方向的下一張是否還有頁面，因為我們會遇到第一頁或最后一頁的情況。如果所有的flip選項都有檢測沒有問題，設置該flip對象的dragging屬性為true。
在mouseUpHandler中，我們會檢測每個頁面是否被拖動，如果是則釋放該頁面的拖動。停止拖動后，頁面會根據鼠標的位置決定是向前翻動還是向后翻動。同時頁面的頁面也會被更新，作為頁面的導航。
渲染
現在大部分的邏輯運算都已經完成了，下面我們要學習如果在canvas元素中渲染折疊的頁面。這些渲染的效果大部分都在render()方法中完成，這個方法每秒鍾會執行60次，來實時更新翻動頁面的狀態。

JavaScript Code復制內容到剪貼板

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 );
    }

  }
}

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

如果頁面正在拖動，那么他的target值設置為鼠標坐標相對於電子書寬度的位置，而不是實際的像素值。同時progress也會一點點增加至target值，這樣翻動每幀都會更新，也就得到了我們看到的頁面平滑的翻動動畫效果。
因為每一幀都要遍歷所有的頁面，所以我們需要保證只重繪當前活動的頁面。如果頁面翻動沒有很接近書的邊緣(BOOK_WIDTH的0.3%)，或者頁面的flagged屬性值是dragging，我們認為該頁面是當前活動的頁面。
現在所有的邏輯運算都已經完成了，下面需要根據頁面的當前狀態繪制翻動頁面效果。我們來看胰腺癌drawFlip()方法的第一部分。

JavaScript Code復制內容到剪貼板

// 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";

這部分的代碼開始是一些變量的計算，它們用來繪制真實的頁面翻動效果。Progress變量在這些變量中扮演最重要的角色，因為它是頁面要翻動到的位置。為了添加深度效果，我們讓頁面可以超出書的邊界，當頁面翻動至書脊位置時，超出部分達到了極限。