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复制内容到剪贴板
  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变量在这些变量中扮演最重要的角色，因为它是页面要翻动到的位置。为了添加深度效果，我们让页面可以超出书的边界，当页面翻动至书脊位置时，超出部分达到了极限。
posted @ 2014-07-22 16:49  郑文亮  阅读(18771)  评论(1)  编辑  收藏  举报