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

Hakim El Hattab
Hakim El Hattab
X 首页

简介

2010 年，F-i.com 与 Google Chrome 团队合作开发了一款基于 HTML5 的教育 Web 应用，名为“关于浏览器和网络的 20 项须知”(www.20thingsilearned.com)。该项目背后的一个关键理念是，最好以图书的语境来呈现。由于这本书的内容主要是关于开放网络技术的，因此我们认为坚持这一点非常重要，具体方法是将容器本身作为这些技术如今所能实现的目标的示例。

“我了解到的关于浏览器和网络的 20 件事”的封面和首页
《关于浏览器和网络的 20 项须知》的封面和首页 (www.20thingsilearned.com)

我们认为，要实现像真实图书一样的效果，最好的方式是模拟出模拟阅读体验的优点，同时仍利用数字领域的优势（例如导航）。在对阅读流程的图形和交互式处理方面投入了大量精力，尤其是图书的书页从一个页面翻到另一个页面的方式。

使用入门

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

开始之前，建议您查看演示，了解我们想要构建的内容。

Markup

请务必注意，我们在画布上绘制的内容无法由搜索引擎编入索引、由访问者选择或通过浏览器内搜索找到。因此，我们要处理的内容会直接放在 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 中设置的，因此，如果您要更改图书的大小，还需要更新其中的值。

常量。
整个代码中用于跟踪互动和绘制翻页效果的常量值。

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

// 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 表示图书的最右侧边缘。

进度。
翻页的进度和目标值用于确定应按 -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 &amp;&amp; page - 1 >= 0) {
    // We are on the left side, drag the previous page
    flips[page - 1].dragging = true;
}
else if (mouse.x > 0 &amp;&amp; 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 且现在应被释放。释放某个翻页后，我们会根据当前的鼠标位置设置其目标值，以匹配其应翻转的一侧。页码也会更新，以反映这一导航。

渲染

现在，大部分逻辑已准备就绪，我们将介绍如何将折叠纸渲染到画布元素上。大多数操作发生在 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 &amp; 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 的 translate(x,y) 方法用于偏移坐标系，以便绘制页面翻转，而脊柱顶部作为 0,0 位置。请注意，我们还需要对画布的当前转换矩阵使用 save()，并在完成绘制后对其执行 restore()。

翻译
这是我们绘制翻页效果的起点。最初的 0,0 点位于图片的左上角，但通过 Translate(x,y) 进行更改，我们可以简化绘制逻辑。

我们将使用 foldGradient 填充折叠纸的形状，以呈现真实的高光和阴影。我们还在纸张周围添加一条非常细的线，这样在浅色背景下，纸张就不会消失。

现在，我们最后要做的就是使用上面定义的属性绘制折叠纸的形状。纸张的左侧和右侧用直线绘制，顶部和底部采用曲线，以呈现折叠纸的弯曲效果。这种纸张弯曲效果的强度由 verticalOutdent 值确定。

大功告成！现在，您就得到了一个功能齐全的翻页导航。

翻页演示

翻页效果的关键在于传达恰如其分的交互感觉，因此只关注图片并不能做到完全恰到好处。

后续步骤

硬翻转
本教程中的软翻页功能与其他类似图书的功能（例如互动式精装版）搭配使用时，效果会更加出色。

这只是利用 HTML5 功能（例如画布元素）可以实现什么效果的一个示例。建议您访问 www.20thingsilearned.com，了解更完善的图书体验，该技术是从此处摘录的。您可从中了解翻页功能在实际应用中是如何运用的，以及与其他 HTML5 功能搭配使用后，翻页效果如何。

参考