กรณีศึกษา - เอฟเฟ็กต์การพลิกหน้าจาก 20thingsilearned.com

Hakim El Hattab

บทนำ

ในปี 2010 F-i.com และทีม Google Chrome ได้ร่วมกันพัฒนาเว็บแอปเพื่อการศึกษาที่ใช้ HTML5 ชื่อว่า 20 Things I Learned about Browsers and the Web (www.20thingsilearned.com) แนวคิดหลักอย่างหนึ่งที่อยู่เบื้องหลังโปรเจ็กต์นี้คือการนำเสนอเนื้อหาในบริบทของหนังสือ เนื่องจากเนื้อหาของหนังสือเกี่ยวข้องกับเทคโนโลยีเว็บแบบเปิดเป็นอย่างมาก เราจึงรู้สึกว่าการยึดมั่นในแนวคิดดังกล่าวเป็นสิ่งสำคัญด้วยการทำให้คอนเทนเนอร์เป็นตัวอย่างของสิ่งที่เทคโนโลยีเหล่านี้ช่วยให้เราทำได้ในปัจจุบัน

เราจึงตัดสินใจว่าวิธีที่ดีที่สุดในการสร้างความรู้สึกเหมือนอ่านหนังสือในโลกแห่งความเป็นจริงคือการจำลองส่วนที่ดีของประสบการณ์การอ่านแบบแอนะล็อก พร้อมทั้งใช้ประโยชน์จากโลกดิจิทัลในด้านต่างๆ เช่น การนำทาง เราทุ่มเทอย่างมากในการออกแบบการไหลของการอ่านแบบกราฟิกและแบบอินเทอร์แอกทีฟ โดยเฉพาะอย่างยิ่งวิธีพลิกหน้าหนังสือจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง

เริ่มต้นใช้งาน

บทแนะนำนี้จะอธิบายขั้นตอนการสร้างเอฟเฟกต์พลิกหน้าของคุณเองโดยใช้องค์ประกอบ Canvas และ JavaScript จำนวนมาก เราได้ละเว้นโค้ดพื้นฐานบางส่วน เช่น การประกาศตัวแปรและการสมัครใช้บริการเครื่องมือฟังเหตุการณ์ ออกจากข้อมูลโค้ดในบทความนี้ ดังนั้นโปรดอย่าลืม อ้างอิงตัวอย่างที่ใช้งานได้

ก่อนเริ่มต้นใช้งาน คุณควรดูเดโมเพื่อให้ทราบว่าเรากำลังจะสร้างอะไร

Markup

โปรดทราบว่าสิ่งที่วาดบน 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>

เรามีองค์ประกอบคอนเทนเนอร์หลักสำหรับหนังสือ ซึ่งมีหน้าต่างๆ ของหนังสือและองค์ประกอบ canvas ที่เราจะใช้ในการวาดหน้าพลิก ภายในองค์ประกอบ section จะมี Wrapper 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รอบๆ Canvas เพื่อให้กระดาษยื่นออกมานอกหนังสือได้เมื่อพลิกหน้า โปรดทราบว่าค่าคงที่บางรายการที่กำหนดไว้ที่นี่จะตั้งค่าไว้ใน 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
});
}

ก่อนอื่นเราต้องตรวจสอบว่าหน้าต่างๆ วางซ้อนกันอย่างถูกต้องโดย จัดระเบียบ 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ใดบ้างที่ถูกแจ้งว่าไม่เหมาะสมและควร เผยแพร่ได้แล้ว เมื่อปล่อยการพลิก เราจะตั้งค่าเป้าหมายให้ตรงกับ ด้านที่ควรพลิกไปตามตำแหน่งเมาส์ปัจจุบัน นอกจากนี้ เรายังอัปเดตหมายเลขหน้าให้สอดคล้องกับการนำทางนี้ด้วย

การแสดงผล

ตอนนี้เรามีตรรกะส่วนใหญ่แล้ว เราจะมาดูวิธี แสดงผลกระดาษพับบนองค์ประกอบ 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 );
}

}
}

ก่อนที่จะเริ่มแสดงผล flips เราจะรีเซ็ต Canvas โดยใช้วิธี clearRect(x,y,w,h) การล้างทั้ง Canvas จะทำให้ประสิทธิภาพลดลงอย่างมาก และการล้างเฉพาะภูมิภาคที่เราวาด จะมีประสิทธิภาพมากกว่า เพื่อไม่ให้บทแนะนำนี้ออกนอกเรื่อง เราจะพูดถึงแค่การล้างทั้ง Canvas

หากมีการลากการพลิก เราจะอัปเดตค่า target ให้ตรงกับ ตำแหน่งเมาส์ แต่จะอยู่ในช่วง -1 ถึง 1 แทนที่จะเป็นพิกเซลจริง นอกจากนี้ เรายังเพิ่ม progress เป็นเศษส่วนของระยะทางไปยัง target ซึ่งจะทำให้การพลิกมีความราบรื่นและเป็นภาพเคลื่อนไหว เนื่องจากมีการอัปเดตในทุกเฟรม

เนื่องจากเราจะตรวจสอบ flips ทั้งหมดในทุกเฟรม เราจึงต้อง ตรวจสอบว่าเราวาดเฉพาะเฟรมที่ใช้งานอยู่เท่านั้น หากการพลิกหน้าไม่ได้อยู่ใกล้ขอบหนังสือมากนัก (ภายใน 0.3% ของ BOOK_WIDTH) หรือหากมีการแจ้งว่า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();

เราใช้เมธอด translate(x,y) ของ Canvas API เพื่อชดเชยระบบพิกัด เพื่อให้วาดการพลิกหน้าโดยให้ด้านบนของสันเป็นตำแหน่ง 0,0 ได้ โปรดทราบว่าเรายังต้องsave()เมทริกซ์การเปลี่ยนรูปแบบปัจจุบันของ Canvas และrestore()ด้วย เมื่อวาดเสร็จแล้ว

foldGradient คือสิ่งที่เราจะใช้เติมรูปร่างของกระดาษที่พับ เพื่อให้มีไฮไลต์และเงาที่สมจริง นอกจากนี้ เรายังเพิ่มเส้นบางๆ รอบภาพวาดบนกระดาษเพื่อให้กระดาษไม่หายไปเมื่อวาง บนพื้นหลังสีอ่อน

ตอนนี้เหลือเพียงวาดรูปร่างของกระดาษที่พับโดยใช้ พร็อพเพอร์ตี้ที่เรากำหนดไว้ข้างต้น ด้านซ้ายและขวาของกระดาษวาดเป็นเส้นตรง และด้านบนและล่างโค้งเพื่อให้ความรู้สึกเหมือนกระดาษพับ ความแข็งแรงของการงอกระดาษนี้จะกำหนดโดยค่า verticalOutdent

เท่านี้ก็เรียบร้อย ตอนนี้คุณมีระบบนำทางแบบพลิกหน้าซึ่งทำงานได้อย่างสมบูรณ์แล้ว

การสาธิตการพลิกหน้า

เอฟเฟกต์การพลิกหน้าเป็นเรื่องของการสื่อสารความรู้สึกแบบอินเทอร์แอกทีฟที่เหมาะสม ดังนั้นการดูรูปภาพของเอฟเฟกต์นี้จึงไม่สามารถสื่อให้เห็นถึงความรู้สึกที่แท้จริงได้

ขั้นตอนถัดไป

นี่เป็นเพียงตัวอย่างหนึ่งของสิ่งที่ทำได้โดยใช้ฟีเจอร์ HTML5 เช่น องค์ประกอบ Canvas ฉันขอแนะนำให้คุณดูประสบการณ์การอ่านหนังสือที่ดียิ่งขึ้น ซึ่งเทคนิคนี้เป็นส่วนหนึ่งของหนังสือดังกล่าวที่ www.20thingsilearned.com คุณจะเห็นว่าการพลิกหน้าสามารถนำไปใช้ในแอปพลิเคชันจริงได้อย่างไร และจะทรงพลังเพียงใดเมื่อใช้ร่วมกับฟีเจอร์อื่นๆ ของ HTML5

ข้อมูลอ้างอิง

• ข้อกำหนดของ API ของ Canvas