简介
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来操控它。所以电子书的结构非常简单:
- <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>
打开电子书,可以看到一个背景图片,它包含纸张的材质和书籍效果。
逻辑
实现翻页效果的代码并不是很复杂,但代码量很大,因为有很多图形效果需要用代码实现。首先我们从代码中的常量开始说起,它的使用贯穿整个程序。
- 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;
贯穿代码中的常量,用来跟踪鼠标交互并绘制翻页页面
下一步需要为每个页面定义一个flip对象,在翻页交互过程中,它会持续更新来反应当前翻页的状态。
- // 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
- });
- }
Progress和target值用来定义页面的折叠量,可以是-1到+1之间的值.
现在每个页面都有自己的flip对象了,下面我们学获取用户的鼠标位置,并根据这个值开始翻页。
- 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;
- }
- }
在mouseDonwHandler中,检测鼠标是在书的左边还是右边按下,记得得知翻页的方向。我还需要知道翻页方向的下一张是否还有页面,因为我们会遇到第一页或最后一页的情况。如果所有的flip选项都有检测没有问题,设置该flip对象的dragging属性为true。
在mouseUpHandler中,我们会检测每个页面是否被拖动,如果是则释放该页面的拖动。停止拖动后,页面会根据鼠标的位置决定是向前翻动还是向后翻动。同时页面的页面也会被更新,作为页面的导航。
渲染
现在大部分的逻辑运算都已经完成了,下面我们要学习如果在canvas元素中渲染折叠的页面。这些渲染的效果大部分都在render()方法中完成,这个方法每秒钟会执行60次,来实时更新翻动页面的状态。
- 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 );
- }
- }
- }
如果页面正在拖动,那么他的target值设置为鼠标坐标相对于电子书宽度的位置,而不是实际的像素值。同时progress也会一点点增加至target值,这样翻动每帧都会更新,也就得到了我们看到的页面平滑的翻动动画效果。
因为每一帧都要遍历所有的页面,所以我们需要保证只重绘当前活动的页面。如果页面翻动没有很接近书的边缘(BOOK_WIDTH的0.3%),或者页面的flagged属性值是dragging,我们认为该页面是当前活动的页面。
现在所有的逻辑运算都已经完成了,下面需要根据页面的当前状态绘制翻动页面效果。我们来看胰腺癌drawFlip()方法的第一部分。
- // 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";