html5中文学习网

您的位置: 首页 > html5教程 > 高级应用 » 正文

HTML5开发的翻页效果

[ ] 已经帮助:人解决问题

简介AefHTML5中文学习网 - HTML5先行者学习网
2010年F-i.com和Google Chrome团队合力致力于主题为《20 Things I Learned about Browsers and the Web》(www.20thingsilearned.com)的web app的宣传教育。这个项目最主要的思想是在传达,用web展现电子书的内容是最合适的选择。因为展现电子书的内容是前所未有的web技术,我们坚信以现在的技术完全可以用一个容器来展现这样的例子。AefHTML5中文学习网 - HTML5先行者学习网

AefHTML5中文学习网 - HTML5先行者学习网
AefHTML5中文学习网 - HTML5先行者学习网
书籍的封面同时也是《20 Things I Learned About Browsers and the Web》的主页(www.20thingsilearned.com)AefHTML5中文学习网 - HTML5先行者学习网
我们认为,要实现阅读真正书籍的感觉最好的方法是模仿书籍的阅读体验,同时充分利用电子媒介的优势如导航。我在书籍的视觉和交互效果上面下了很大的功夫,特别是翻页的效果。AefHTML5中文学习网 - HTML5先行者学习网

AefHTML5中文学习网 - HTML5先行者学习网
开始制作AefHTML5中文学习网 - HTML5先行者学习网
本教程会带领里学习HTML5电子书的制作流程,并教你用canvas元素和JavaScript来制作自己的电子书。关于JavaScript的基础代码,如变量声明和事件侦听等不在本教程的范围内,具体请参考实例源代码。AefHTML5中文学习网 - HTML5先行者学习网
开始之前,我们还是先看一下demo的效果吧,这样我们可以有目的行的去学习。AefHTML5中文学习网 - HTML5先行者学习网
AefHTML5中文学习网 - HTML5先行者学习网
电子书结构AefHTML5中文学习网 - HTML5先行者学习网
你一定要时时记住,在canvas里绘制的所有信息都无法被搜索引擎搜到,也无法由用户在浏览器中搜索到。由于这个原因,我们在DOM中显示文本内容,然后由JavaScript来操控它。所以电子书的结构非常简单:AefHTML5中文学习网 - HTML5先行者学习网

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的水平方向的遮罩。

打开电子书,可以看到一个背景图片,它包含纸张的材质和书籍效果。AefHTML5中文学习网 - HTML5先行者学习网
逻辑AefHTML5中文学习网 - HTML5先行者学习网
实现翻页效果的代码并不是很复杂,但代码量很大,因为有很多图形效果需要用代码实现。首先我们从代码中的常量开始说起,它的使用贯穿整个程序。AefHTML5中文学习网 - HTML5先行者学习网

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中相应的值。AefHTML5中文学习网 - HTML5先行者学习网
 

AefHTML5中文学习网 - HTML5先行者学习网
贯穿代码中的常量,用来跟踪鼠标交互并绘制翻页页面AefHTML5中文学习网 - HTML5先行者学习网
下一步需要为每个页面定义一个flip对象,在翻页交互过程中,它会持续更新来反应当前翻页的状态。AefHTML5中文学习网 - HTML5先行者学习网

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. forvar 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表示整页翻到书的最右边。
 

AefHTML5中文学习网 - HTML5先行者学习网
AefHTML5中文学习网 - HTML5先行者学习网
Progress和target值用来定义页面的折叠量,可以是-1到+1之间的值.AefHTML5中文学习网 - HTML5先行者学习网
现在每个页面都有自己的flip对象了,下面我们学获取用户的鼠标位置,并根据这个值开始翻页。AefHTML5中文学习网 - HTML5先行者学习网

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.   forvar 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。AefHTML5中文学习网 - HTML5先行者学习网
在mouseUpHandler中,我们会检测每个页面是否被拖动,如果是则释放该页面的拖动。停止拖动后,页面会根据鼠标的位置决定是向前翻动还是向后翻动。同时页面的页面也会被更新,作为页面的导航。AefHTML5中文学习网 - HTML5先行者学习网
渲染AefHTML5中文学习网 - HTML5先行者学习网
现在大部分的逻辑运算都已经完成了,下面我们要学习如果在canvas元素中渲染折叠的页面。这些渲染的效果大部分都在render()方法中完成,这个方法每秒钟会执行60次,来实时更新翻动页面的状态。AefHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板
  1. function render() {  
  2.   // Reset all pixels in the canvas  
  3.   context.clearRect( 0, 0, canvas.width, canvas.height );  
  4.   
  5.   forvar 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值,这样翻动每帧都会更新,也就得到了我们看到的页面平滑的翻动动画效果。AefHTML5中文学习网 - HTML5先行者学习网
因为每一帧都要遍历所有的页面,所以我们需要保证只重绘当前活动的页面。如果页面翻动没有很接近书的边缘(BOOK_WIDTH的0.3%),或者页面的flagged属性值是dragging,我们认为该页面是当前活动的页面。AefHTML5中文学习网 - HTML5先行者学习网
现在所有的逻辑运算都已经完成了,下面需要根据页面的当前状态绘制翻动页面效果。我们来看胰腺癌drawFlip()方法的第一部分。AefHTML5中文学习网 - HTML5先行者学习网

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

AefHTML5中文学习网 - HTML5先行者学习网

页面翻动时的折叠效果.AefHTML5中文学习网 - HTML5先行者学习网
现在所有的值都一个就位,万事俱备,只差绘制页面了!AefHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板
  1. context.save();  
  2. context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );  
  3.   
  4. // Draw a sharp shadow on the left side of the page  
  5. context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';  
  6. context.lineWidth = 30 * strength;  
  7. context.beginPath();  
  8. context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);  
  9. context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));  
  10. context.stroke();  
  11.   
  12. // Right side drop shadow  
  13. var rightShadowGradient = context.createLinearGradient(foldX, 0,  
  14.               foldX + rightShadowWidth, 0);  
  15. rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');  
  16. rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');  
  17.   
  18. context.fillStyle = rightShadowGradient;  
  19. context.beginPath();  
  20. context.moveTo(foldX, 0);  
  21. context.lineTo(foldX + rightShadowWidth, 0);  
  22. context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);  
  23. context.lineTo(foldX, PAGE_HEIGHT);  
  24. context.fill();  
  25.   
  26. // Left side drop shadow  
  27. var leftShadowGradient = context.createLinearGradient(  
  28.     foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);  
  29. leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');  
  30. leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');  
  31.   
  32. context.fillStyle = leftShadowGradient;  
  33. context.beginPath();  
  34. context.moveTo(foldX - foldWidth - leftShadowWidth, 0);  
  35. context.lineTo(foldX - foldWidth, 0);  
  36. context.lineTo(foldX - foldWidth, PAGE_HEIGHT);  
  37. context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);  
  38. context.fill();  
  39.   
  40. // Gradient applied to the folded paper (highlights & shadows)  
  41. var foldGradient = context.createLinearGradient(  
  42.     foldX - paperShadowWidth, 0, foldX, 0);  
  43. foldGradient.addColorStop(0.35, '#fafafa');  
  44. foldGradient.addColorStop(0.73, '#eeeeee');  
  45. foldGradient.addColorStop(0.9, '#fafafa');  
  46. foldGradient.addColorStop(1.0, '#e2e2e2');  
  47.   
  48. context.fillStyle = foldGradient;  
  49. context.strokeStyle = 'rgba(0,0,0,0.06)';  
  50. context.lineWidth = 0.5;  
  51.   
  52. // Draw the folded piece of paper  
  53. context.beginPath();  
  54. context.moveTo(foldX, 0);  
  55. context.lineTo(foldX, PAGE_HEIGHT);  
  56. context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2),  
  57.                          foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);  
  58. context.lineTo(foldX - foldWidth, -verticalOutdent);  
  59. context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);  
  60.   
  61. context.fill();  
  62. context.stroke();  
  63.   
  64. context.restore();  
在canvas的API中tranlate(x,y)方法用来移动画布的坐标系统,以便于我们可以以书脊的顶端作为(0,0)原点来绘制翻动的页面。注意,我们需要使用save()方法保存当前canvas的变换,变换完成后调用restore()方法。
 

AefHTML5中文学习网 - HTML5先行者学习网

AefHTML5中文学习网 - HTML5先行者学习网
绘制翻动页面的起始点,同translate(x,y)方法,将其从canvas的左上角移动到书脊顶端,这样简化了绘制的逻辑AefHTML5中文学习网 - HTML5先行者学习网
foldGradient方法用来填充折叠的页面,同时绘制真实的高光和阴影效果。同时我还为页面绘制了一条很窄的黑边,防止在较亮的背景下页面“消失”。AefHTML5中文学习网 - HTML5先行者学习网
现在剩下的就是用我们前面定义的变量绘制折叠的页面。页面左右两侧用直线绘制,顶部和底部绘制弯曲的曲线,产生一种纸张折叠的感觉。页面的折叠程度由verticalOutdent值决定。AefHTML5中文学习网 - HTML5先行者学习网
全文结束!现在你得到的是一个完整的HTML5电子书。AefHTML5中文学习网 - HTML5先行者学习网

AefHTML5中文学习网 - HTML5先行者学习网
翻书实例DemoAefHTML5中文学习网 - HTML5先行者学习网
翻页效果是为了像用户传递正确的翻页体验,所有本教程中的图片无法让你感受到效果,点击下面的链接体验一下最终的结果。AefHTML5中文学习网 - HTML5先行者学习网

查看实例AefHTML5中文学习网 - HTML5先行者学习网

下载源码 (75k .zip)AefHTML5中文学习网 - HTML5先行者学习网

AefHTML5中文学习网 - HTML5先行者学习网
下一步AefHTML5中文学习网 - HTML5先行者学习网
AefHTML5中文学习网 - HTML5先行者学习网

AefHTML5中文学习网 - HTML5先行者学习网
如果本教程中的电子书加上一个硬书皮,会使它在翻页的基础上,给人带来更好的阅读体验AefHTML5中文学习网 - HTML5先行者学习网
AefHTML5中文学习网 - HTML5先行者学习网
本教程中的翻页效果只是用来展示HMTL5特性(如canvas)的应用之一。我建议你找一本装帧更加优良的书看一下,在其中找到http://www.20thingsilearned.com/之外的一些技术。这样你才会看到如何将本例中的翻页效果应用到现实的项目中,以及如何应用HTML5的其他特性使翻页效果更加强大。AefHTML5中文学习网 - HTML5先行者学习网

(责任编辑:html5先行者
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助