HTML5如何开发翻页效果

小编给大家分享一下HTML5如何开发翻页效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

电子书结构

你一定要时时记住，在canvas里绘制的所有信息都无法被搜索引擎搜到，也无法由用户在浏览器中搜索到。由于这个原因，我们在DOM中显示文本内容，然后由JavaScript来操控它。所以电子书的结构非常简单：

XML/HTML Code复制内容到剪贴板

<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>  

电子书的结构中包含一个主容器，它包含所有的页面和用来绘制翻页效果的canvas元素。在section元素中包含一个div元素，它包含了电子书页面的内容，我们可以调整这个div的宽度而不影响页面内容的布局。div有固定的宽度，同时section设置溢出隐藏，这样section元素的作用实际是作为div的水平方向的遮罩。

打开电子书，可以看到一个背景图片，它包含纸张的材质和书籍效果。

逻辑

实现翻页效果的代码并不是很复杂，但代码量很大，因为有很多图形效果需要用代码实现。首先我们从代码中的常量开始说起，它的使用贯穿整个程序。

JavaScript Code复制内容到剪贴板

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;  

CANVAS_PADDING是canvas周围的留白，这样在翻页的时候页面可以超出书的尺寸。要注意的是，这里设置的常量有的也在CSS中设置了这些值，所以如果你想修改书的尺寸，同样需要修改CSS中相应的值。

贯穿代码中的常量，用来跟踪鼠标交互并绘制翻页页面

下一步需要为每个页面定义一个flip对象，在翻页交互过程中，它会持续更新来反应当前翻页的状态。

JavaScript Code复制内容到剪贴板

// 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  

  });  

}  

首先我们要保证section元素的z-index被有序的排列，这样页面才可以正确的排序，也就是说第一页在上面，最后一页在最下面。flip对象最重要的属性是progress和target值。它们用来定义翻动页面折叠的大小，-1表示整页翻到左边，0表示翻到书的中间位置，+1表示整页翻到书的最右边。

Progress和target值用来定义页面的折叠量，可以是-1到+1之间的值.

现在每个页面都有自己的flip对象了，下面我们学获取用户的鼠标位置，并根据这个值开始翻页。

JavaScript Code复制内容到剪贴板

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;  

  }  

}  

mouseMoveHandler方法会实时更新mouse对象的内容，这样我们可以得到鼠标的精确位置。

在mouseDonwHandler中，检测鼠标是在书的左边还是右边按下，记得得知翻页的方向。我还需要知道翻页方向的下一张是否还有页面，因为我们会遇到第一页或最后一页的情况。如果所有的flip选项都有检测没有问题，设置该flip对象的dragging属性为true。

在mouseUpHandler中，我们会检测每个页面是否被拖动，如果是则释放该页面的拖动。停止拖动后，页面会根据鼠标的位置决定是向前翻动还是向后翻动。同时页面的页面也会被更新，作为页面的导航。

渲染

现在大部分的逻辑运算都已经完成了，下面我们要学习如果在canvas元素中渲染折叠的页面。这些渲染的效果大部分都在render()方法中完成，这个方法每秒钟会执行60次，来实时更新翻动页面的状态。

JavaScript Code复制内容到剪贴板

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 );  

    }  

  }  

}  

开始渲染之前，用clearRect(x,y,w,h)方法重置canvas。重置整个canvas画布会大大降低运行的性能，相比之下，仅仅重置需要重新绘制的部分，效率会更高。但是为了不偏离本教程的话题，我们还是重置更个canvas画布。

如果页面正在拖动，那么他的target值设置为鼠标坐标相对于电子书宽度的位置，而不是实际的像素值。同时progress也会一点点增加至target值，这样翻动每帧都会更新，也就得到了我们看到的页面平滑的翻动动画效果。

因为每一帧都要遍历所有的页面，所以我们需要保证只重绘当前活动的页面。如果页面翻动没有很接近书的边缘(BOOK_WIDTH的0.3%)，或者页面的flagged属性值是dragging，我们认为该页面是当前活动的页面。

现在所有的逻辑运算都已经完成了，下面需要根据页面的当前状态绘制翻动页面效果。我们来看胰腺癌drawFlip()方法的第一部分。

JavaScript Code复制内容到剪贴板

// 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";  

这部分的代码开始是一些变量的计算，它们用来绘制真实的页面翻动效果。Progress变量在这些变量中扮演最重要的角色，因为它是页面要翻动到的位置。为了添加深度效果，我们让页面可以超出书的边界，当页面翻动至书脊位置时，超出部分达到了极限。

页面翻动时的折叠效果.

现在所有的值都一个就位，万事俱备，只差绘制页面了！

JavaScript Code复制内容到剪贴板

context.save();  

context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );  

// Draw a sharp shadow on the left side of the page  

context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';  

context.lineWidth = 30 * strength;  

context.beginPath();  

context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);  

context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));  

context.stroke();  

// Right side drop shadow  

var rightShadowGradient = context.createLinearGradient(foldX, 0,  

              foldX + rightShadowWidth, 0);  

rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');  

rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');  

context.fillStyle = rightShadowGradient;  

context.beginPath();  

context.moveTo(foldX, 0);  

context.lineTo(foldX + rightShadowWidth, 0);  

context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);  

context.lineTo(foldX, PAGE_HEIGHT);  

context.fill();  

// Left side drop shadow  

var leftShadowGradient = context.createLinearGradient(  

    foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);  

leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');  

leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');  

context.fillStyle = leftShadowGradient;  

context.beginPath();  

context.moveTo(foldX - foldWidth - leftShadowWidth, 0);  

context.lineTo(foldX - foldWidth, 0);  

context.lineTo(foldX - foldWidth, PAGE_HEIGHT);  

context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);  

context.fill();  

// Gradient applied to the folded paper (highlights & shadows)  

var foldGradient = context.createLinearGradient(  

    foldX - paperShadowWidth, 0, foldX, 0);  

foldGradient.addColorStop(0.35, '#fafafa');  

foldGradient.addColorStop(0.73, '#eeeeee');  

foldGradient.addColorStop(0.9, '#fafafa');  

foldGradient.addColorStop(1.0, '#e2e2e2');  

context.fillStyle = foldGradient;  

context.strokeStyle = 'rgba(0,0,0,0.06)';  

context.lineWidth = 0.5;  

// Draw the folded piece of paper  

context.beginPath();  

context.moveTo(foldX, 0);  

context.lineTo(foldX, PAGE_HEIGHT);  

context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2),  

                         foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);  

context.lineTo(foldX - foldWidth, -verticalOutdent);  

context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);  

context.fill();  

context.stroke();  

context.restore();  

在canvas的API中tranlate(x,y)方法用来移动画布的坐标系统，以便于我们可以以书脊的顶端作为(0,0)原点来绘制翻动的页面。注意，我们需要使用save()方法保存当前canvas的变换，变换完成后调用restore()方法。

绘制翻动页面的起始点，同translate(x,y)方法，将其从canvas的左上角移动到书脊顶端，这样简化了绘制的逻辑

foldGradient方法用来填充折叠的页面，同时绘制真实的高光和阴影效果。同时我还为页面绘制了一条很窄的黑边，防止在较亮的背景下页面“消失”。

现在剩下的就是用我们前面定义的变量绘制折叠的页面。页面左右两侧用直线绘制，顶部和底部绘制弯曲的曲线，产生一种纸张折叠的感觉。页面的折叠程度由verticalOutdent值决定。

以上是“HTML5如何开发翻页效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！