案例研究：20thingsilearned.com 上的翻页效果

Question

在 2010 年，F-i.com 和 Google Chrome 浏览器小组合作开发了一款基于 HTML5 的教育性网络应用程序，名为“关于浏览器和网络的 20 项须知”(www.20thingsilearned.com)。此项目所蕴含的关键理念之一就是，最好采用图书一样的呈现方式。由于此书的内容主要是围绕开放式网络技术的，因此，我们认为很有必要将这本图书本身作为一个鲜活的例子，充分地展示如今这些技术能够达到什么样的效果。

“关于浏览器和网络的 20 项须知”的封面和首页 (www.20thingsilearned.com)

我们认为，要做出像真正图书一样的效果，最好的方式就是模拟出阅读体验中的优点，同时还要利用诸如导航这样的数码领域的优势。我们在图形表现和阅读过程的交互处理方面（尤其是图书的翻页效果）下了很大的功夫。

使用入门

此教程将完整地向您介绍如何使用画布元素和大量的 JavaScript 来自行创建翻页效果。本文的代码段中略去了某些基本代码（例如变量声明和事件监听器订阅），因此请务必参考有效示例。

在开始前，我们建议您首先查看该演示网页，了解我们要构建的是什么。

标记

您必须时刻谨记，我们在画布上绘制的内容是无法由搜索引擎编入索引、由访问者选择或通过浏览器内搜索找到的。因此，我们要处理的内容会直接放入 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>

对于此图书，我们有一个主容器元素，其中又包含了不同的书页以及用来绘制翻页效果的 canvas 元素。在 section 元素内有相关内容的 div 封装器，利用此封装器，可以在不影响页面内容布局的情况下更改页面的宽度。div 具有固定宽度，而系统将 section 设为隐藏其溢出，这使得 section 的宽度成为 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;

CANVAS_PADDING 是围绕画布添加的，这样我们就可以在翻页时将书页翻到图书外部。请注意，此处定义的某些常量值也在 CSS 中进行了设置，因此如果您要更改图书的大小，也需要在 CSS 中更新相应的值。

代码中用于跟踪交互操作和绘制翻页效果的常量值。

接下来我们需要为每页定义一个翻页对象，这些对象会在我们与图书交互时不断更新，以反映翻页的当前状态。

// 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 进行组织（将第一页放在顶部，最后一页放在底部），以确保页面的层次划分正确无误。翻页对象最重要的属性是 progress 和 target 值。这些值用于确定书页目前应翻折到什么程度，-1 表示图书最左边，0 表示图书正中间，+1 表示图书最右边。

翻页的 progress 值和 target 值用于确定翻折的页面应以 -1 还是 +1 的级别绘制。

为每页定义了一个翻页对象后，我们需要开始捕捉并使用用户输入的内容来更新翻页对象的状态。

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 对象，以便我们始终获得最新的光标位置。

在 mouseDownHandler 中，我们先检查鼠标点击的是左侧还是右侧页面，这样就能知道要开始朝哪个方向翻页。我们还要确定这个方向上是否存在页面，因为当前的页面可能是第一页或最后一页。在进行这些检查后，如果可以使用有效的翻页选项，我们就会将相应翻页对象的 dragging 标记设置为 true。

遇到 mouseUpHandler 时，我们会在所有 flips 中检查是否有标记为 dragging 并且现在应释放的翻页对象。释放某个翻页对象后，我们会根据当前的鼠标位置设置该对象的 target 值，以匹配页面应翻折的方向。页码也会进行更新，以反映此导航操作。

呈现

大部分逻辑准备就绪后，我们将介绍如何在画布元素上呈现翻折页面。此操作大部分是在 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 );
    }

  }
}

在开始呈现 flips 前，我们使用 clearRect(x,y,w,h) 方法重置画布。清空整个画布会大幅降低系统性能，因此更为高效的方法是只清空我们要绘制的区域。为了让本教程切合主题，我们暂且就清空整个画布。

如果某个翻页对象正处于拖动状态，我们就会更新其 target 值以匹配鼠标位置，不过是按 -1 至 1 的范围而不是实际的像素。我们还会根据 target 对 progress 增加一定比例的距离，这样可实现平滑的翻页动画效果，因为这个距离是按每一帧不断更新的。

由于我们要按每一帧处理所有 flips，因此需要确保仅重新绘制活动的对象。如果某个翻页对象不是非常靠近图书边缘（距离在 BOOK_WIDTH 的 0.3% 以内），或者已标记为 dragging，则可视为活动对象。

所有逻辑准备就绪后，我们需要根据翻页对象的当前状态绘制其图示。此时应注意 drawFlip(flip) 函数的第一部分。

// 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 值具有很重要的作用，因为这决定了要在哪里显示翻页效果。为了添加翻页效果的深度，我们让页面可以翻出图书的上下边缘，这种效果是在靠近书脊的位置翻页时达到的最大程度。

这就是翻页或拖动页面时的页面翻折显示效果。

所有的值都准备就绪后，剩下的工作就是绘制页面了！

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

画布 API 的 translate(x,y) 方法可用于偏移坐标系，这样我们就能以书脊顶部作为 0,0 原点来绘制翻页效果。请注意，我们还需要对画布当前的变换矩阵调用 save() 函数，并在完成绘制后再调用 restore() 函数。

这是我们绘制翻页效果的起点。原来的 0,0 原点位于图片的左上方，但是通过 translate(x,y) 改变原点位置后，我们可以简化绘图逻辑。

我们要在翻折页面的形状中填充 foldGradient，以呈现出真实的高亮和阴影效果。我们还要在绘制的纸页周围添加一圈细线，以便在高亮背景中显示出纸页的轮廓。

现在，剩下的工作就是使用上文定义的各属性绘制翻折纸页的形状。纸页的左侧和右侧用直线绘制，而顶部和底部则采用曲线，目的是呈现出纸张翻折时的弯曲效果。这种纸张弯曲效果的程度由 verticalOutdent 值确定。

大功告成！现在您就做出了一个功能完备的翻页导航效果。

翻页演示

翻页效果的关键在于实现恰如其分的交互感觉，所以只关注图片是无法完全达到这一要求的。使用以下链接体验一下最终结果吧！

观看有效示例

下载源代码（75 k 大小的 .zip 文件）

后续步骤

本教程中的软翻页效果与其他一些模拟真实图书的功能（例如交互式硬封面）结合后，可展示出更强大的效果。

这里只是举了一个例子，说明利用 HTML5 功能（例如画布元素）能够做出什么。我推荐您通过下面的网站感受一下更完善的图书阅读体验：www.20thingsilearned.com，翻页效果这样的技术只是其中的一部分而已。在该网站上，您可以看到翻页是如何在实际应用程序中运用的，以及与其他 HTML5 功能结合后有多么强大。

参考

• 画布 API 规范