個案研究 - 20thingsilearned.com 的《Page Flip Effect》

Hakim El Hattab

簡介

2010 年，F-i.com 與 Google Chrome 團隊合力開發以 HTML5 為基礎的教育網頁應用程式，名為 20 Things I Learned about Browsers and the Web (www.20thingsilearned.com)。本專案的主要概念之一，就是最適合在書籍的內容中呈現。由於書籍的內容主要與開放式網路技術相關，因此我們認為必須遵循這個要點，將容器本身視為可讓我們如今能夠完成的容器範例。

我們決定達到真實書籍體驗的最佳方式，就是模擬類比閱讀體驗的良好部分，同時繼續在導航等領域運用數位領域的優點。我們花費大量心力，研究閱讀流程的圖形和互動方式，尤其是書籍頁面在不同頁面間翻頁的情形。

入門課程

本教學課程將逐步說明如何使用畫布元素和大量 JavaScript 自行建立頁面翻轉效果。本文的程式碼片段中缺少部分基本程式碼 (例如變數宣告和事件監聽器訂閱)，因此請記得參考有效的範例。

開始前，建議你先觀看示範內容，瞭解我們想要建構的項目。

標記

請務必記住，在畫布上繪製的內容無法由搜尋引擎建立索引，也無法由訪客選取或透過瀏覽器內搜尋找到。因此，我們處理的內容會直接放入 DOM 中，如果有 JavaScript 可用，則會由 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
});
}

首先，我們必須整理區段元素的 Z-index，確保頁面正確分層，讓第一頁顯示在第一頁，最後一個頁面則位於底部。翻轉物件最重要的屬性是 progress 和 target 值。這些屬性可用來判斷頁面目前應摺疊距離，-1 代表書籍最左側，0 代表書籍的死心，+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，而非實際像素。此外，我們也將 progress 乘以與 target 之間的距離比例增加。這樣一來，由於每個影格都會更新，因此翻轉進度是順暢且動畫的進展。

我們會處理每個影格上的所有 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();

Canvas API 的 translate(x,y) 方法可用來偏移協調的系統，因此我們可以在旋轉的頂端為 0,0 位置繪製頁面翻轉。請注意，我們也需要save()畫布目前的轉換矩陣，並在繪製完成時restore()進行轉換。

我們會用 foldGradient 填滿摺疊紙形形狀，產生逼真的高亮度和陰影。我們也在紙畫周圍加上極細的線條，讓紙張在套用淺色背景時不會消失。

目前只剩下使用上述屬性繪製摺疊紙的形狀。紙的左側和右側以直線繪製，而頂部和底部則以曲線呈現折疊紙的感覺。此論文的強度取決於 verticalOutdent 值。

大功告成！您現在已具備功能完整的頁面翻轉導覽功能。

頁面翻轉示範

頁面翻轉效果的重點在於傳達正確的互動式互動效果，因此查看圖片並非真的可以達到正義。

後續步驟

這只是使用畫布元素等 HTML5 功能達成的其中一個例子。建議您前往 www.20thingsilearned.com 看看這項技術更為精簡的書籍體驗。這將說明實際應用程式中如何套用翻頁內容，以及搭配其他 HTML5 功能使用時，網頁的效果如何。

參考資料

• Canvas API 規格