码迷，mamicode.com
首页 > Web开发 > 详细

HTML5开发的翻页效果实例

时间：2014-07-22 22:35:34      阅读：257      评论：0      收藏：0      [点我收藏+]

标签：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技术，我们坚信以现在的技术完全可以用一个容器来展现这样的例子。


bubuko.com,布布扣
书籍的封面同时也是《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中相应的值。
 

bubuko.com,布布扣
贯穿代码中的常量，用来跟踪鼠标交互并绘制翻页页面
下一步需要为每个页面定义一个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表示整页翻到书的最右边。
 

bubuko.com,布布扣

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变量在这些变量中扮演最重要的角色，因为它是页面要翻动到的位置。为了添加深度效果，我们让页面可以超出书的边界，当页面翻动至书脊位置时，超出部分达到了极限。

HTML5开发的翻页效果实例,布布扣,bubuko.com

HTML5开发的翻页效果实例

标签：des   style   http   java   使用   os   

原文地址：http://www.cnblogs.com/zhwl/p/3860921.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！