HTML5開發的翻頁效果執行個體

標籤：des   style   http   java   使用   os   

簡介
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複製內容到剪貼簿

1. <div id="book"> 
2.   <canvas id="pageflip-canvas"></canvas> 
3.   <div id="pages"> 
4.     <section> 
5.       <div> <!-- Any type of contents here --> </div> 
6.     </section> 
7.     <!-- More <section>‘s here --> 
8.   </div> 
9. </div> 

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

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

JavaScript Code複製內容到剪貼簿

1. var BOOK_WIDTH = 830; 
2. var BOOK_HEIGHT = 260; 
3. var PAGE_WIDTH = 400; 
4. var PAGE_HEIGHT = 250; 
5. var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2; 
6. var CANVAS_PADDING = 60; 

CANVAS_PADDING是canvas周圍的留白，這樣在翻頁的時候頁面可以超出書的尺寸。要注意的是，這裡設定的常量有的也在CSS中設定了這些值，所以如果你想修改書的尺寸，同樣需要修改CSS中相應的值。
 

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

JavaScript Code複製內容到剪貼簿

1. // Create a reference to the book container element 
2. var book = document.getElementById( "book" ); 
3.  
4. // Grab a list of all section elements (pages) within the book 
5. var pages = book.getElementsByTagName( "section" ); 
6.  
7. for( var i = 0, len = pages.length; i < len; i++ ) { 
8.     pages[i].style.zIndex = len - i; 
9.  
10.     flips.push( { 
11.     progress: 1, 
12.     target: 1, 
13.     page: pages[i], 
14.     dragging: false 
15.   }); 
16. } 

首先我們要保證section元素的z-index被有序的排列，這樣頁面才可以正確的排序，也就是說第一頁在上面，最後一頁在最下面。flip對象最重要的屬性是progress和target值。它們用來定義翻動頁面摺疊的大小，-1表示整頁翻到左邊，0表示翻到書的中間位置，+1表示整頁翻到書的最右邊。 

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

JavaScript Code複製內容到剪貼簿

1. function mouseMoveHandler( event ) { 
2.   // Offset mouse position so that the top of the book spine is 0,0 
3.   mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 ); 
4.   mouse.y = event.clientY - book.offsetTop; 
5. } 
6.  
7. function mouseDownHandler( event ) { 
8.   // Make sure the mouse pointer is inside of the book 
9.   if (Math.abs(mouse.x) < PAGE_WIDTH) { 
10.     if (mouse.x < 0 && page - 1 >= 0) { 
11.       // We are on the left side, drag the previous page 
12.       flips[page - 1].dragging = true; 
13.     } 
14.     else if (mouse.x > 0 && page + 1 < flips.length) { 
15.       // We are on the right side, drag the current page 
16.       flips[page].dragging = true; 
17.     } 
18.   } 
19.  
20.   // Prevents the text selection 
21.   event.preventDefault(); 
22. } 
23.  
24. function mouseUpHandler( event ) { 
25.   for( var i = 0; i < flips.length; i++ ) { 
26.     // If this flip was being dragged, animate to its destination 
27.     if( flips[i].dragging ) { 
28.       // Figure out which page we should navigate to 
29.       if( mouse.x < 0 ) { 
30.         flips[i].target = -1; 
31.         page = Math.min( page + 1, flips.length ); 
32.       } 
33.       else { 
34.         flips[i].target = 1; 
35.         page = Math.max( page - 1, 0 ); 
36.       } 
37.     } 
38.  
39.     flips[i].dragging = false; 
40.   } 
41. } 

mouseMoveHandler方法會即時更新mouse對象的內容，這樣我們可以得到滑鼠的精確位置。

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

JavaScript Code複製內容到剪貼簿

1. function render() { 
2.   // Reset all pixels in the canvas 
3.   context.clearRect( 0, 0, canvas.width, canvas.height ); 
4.  
5.   for( var i = 0, len = flips.length; i < len; i++ ) { 
6.     var flip = flips[i]; 
7.  
8.     if( flip.dragging ) { 
9.       flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 ); 
10.     } 
11.  
12.     // Ease progress towards the target value 
13.     flip.progress += ( flip.target - flip.progress ) * 0.2; 
14.  
15.     // If the flip is being dragged or is somewhere in the middle 
16.     // of the book, render it 
17.     if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) { 
18.       drawFlip( flip ); 
19.     } 
20.  
21.   } 
22. } 

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

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

JavaScript Code複製內容到剪貼簿

1. // Determines the strength of the fold/bend on a 0-1 range 
2. var strength = 1 - Math.abs( flip.progress ); 
3.  
4. // Width of the folded paper 
5. var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress ); 
6.  
7. // X position of the folded paper 
8. var foldX = PAGE_WIDTH * flip.progress + foldWidth; 
9.  
10. // How far outside of the book the paper is bent due to perspective 
11. var verticalOutdent = 20 * strength; 
12.  
13. // The maximum widths of the three shadows used 
14. var paperShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(1 - flip.progress, 0.5), 0); 
15. var rightShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0); 
16. var leftShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0); 
17.  
18. // Mask the page by setting its width to match the foldX 
19. flip.page.style.width = Math.max(foldX, 0) + "px"; 

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