เกริ่นนำ
ในปี 2010 F-i.com และทีม Google Chrome ได้ทำงานร่วมกันในเว็บแอปเพื่อการศึกษาที่ใช้ HTML5 ชื่อว่า 20 สิ่งที่ฉันเรียนรู้เกี่ยวกับเบราว์เซอร์และเว็บ (www.20thingsilearned.com) แนวคิดสำคัญอย่างหนึ่งของโปรเจ็กต์นี้คือการนำเสนอโครงการได้ดีที่สุดในบริบทของหนังสือ เนื่องจากเนื้อหาของหนังสือเล่มนี้เกี่ยวข้องกับเทคโนโลยีเว็บแบบเปิดอย่างมาก เราจึงรู้สึกว่าควรยึดมั่นในเรื่องนี้ไว้โดยทำให้ตัวคอนเทนเนอร์เป็นตัวอย่างของสิ่งที่เทคโนโลยีเหล่านี้ช่วยให้เราประสบความสำเร็จในปัจจุบัน
เราตัดสินใจว่าวิธีที่ดีที่สุดที่จะทำให้รู้สึกเหมือนหนังสือในโลกจริงคือการจำลองส่วนที่ดีของประสบการณ์การอ่านแบบอุปมาอุปไมย ขณะที่ยังคงใช้ประโยชน์จากขอบเขตดิจิทัลในด้านต่างๆ เช่น การนำทาง เราลงแรงอย่างมากไปกับการดำเนินการด้านกราฟิกและการโต้ตอบ ของขั้นตอนการอ่าน โดยเฉพาะวิธีที่หน้าหนังสือพลิกจากหน้าหนึ่งไปอีกหน้าหนึ่ง
เริ่มกระบวนการ
บทแนะนำนี้จะอธิบายขั้นตอนการสร้างเอฟเฟกต์การพลิกหน้าของคุณเองโดยใช้องค์ประกอบ Canvas และ JavaScript จำนวนมาก โค้ดพื้นฐานบางส่วน เช่น การประกาศตัวแปรและการสมัครใช้บริการ Listener เหตุการณ์ได้หายไปจากข้อมูลโค้ดในบทความนี้ ดังนั้นอย่าลืมอ้างอิงตัวอย่างที่ใช้งานได้
ก่อนเริ่มต้น คุณควรดูการสาธิต เพื่อให้ทราบว่าเรากำลังสร้างเป้าหมายใด
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>
เรามีองค์ประกอบคอนเทนเนอร์หลัก 1 รายการสำหรับหนังสือ ซึ่งในตอนนั้นจะมีหน้าต่างๆ ของหนังสือและองค์ประกอบ 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
ไว้รอบภาพพิมพ์แคนวาสเพื่อให้กระดาษยื่นออกมาจากตัวหนังสือเมื่อพลิก โปรดทราบว่าค่าคงที่บางส่วนที่กำหนดไว้ที่นี่มีการตั้งค่าใน 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 ขององค์ประกอบส่วนให้หน้าแรกอยู่ด้านบนสุด และหน้าสุดท้ายอยู่ด้านล่าง พร็อพเพอร์ตี้ที่สำคัญที่สุดของออบเจ็กต์ฝาพับคือค่า 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 && 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
เราจะเริ่มต้นด้วยการตรวจสอบว่าเมาส์ถูกกดลง ไม่ว่าจะเป็นหน้าซ้ายหรือขวา เพื่อให้รู้ว่าต้องการเริ่มพลิกไปในทิศทางใด และเรายังดูแลให้มีหน้าอื่นอยู่ในทิศทางนั้นด้วย เนื่องจากอาจอยู่ในหน้าแรกหรือหน้าสุดท้าย หากตัวเลือก Flip ที่ถูกต้องพร้อมใช้งานหลังจากการตรวจสอบเหล่านี้
เราจะตั้งค่าแฟล็ก 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)
การล้างพื้นที่ทั้งผืนมีค่าใช้จ่ายด้านประสิทธิภาพอย่างมาก และการล้างเฉพาะภูมิภาคที่เรากำลังดำเนินการอยู่จึงจะมีประสิทธิภาพมากขึ้น เพื่อจุดประสงค์ในการเก็บบทแนะนำนี้ต่อไป เราจะปล่อยให้เป็นหน้าที่ล้างทั้งผืนผ้าใบ
หากมีการลากฝาพับ เราจะอัปเดตค่า 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()
เมทริกซ์การเปลี่ยนรูปแบบปัจจุบันของผืนผ้าใบและ restore()
กับเมทริกซ์การเปลี่ยนแปลงเมื่อวาดเสร็จด้วย
foldGradient
คือสิ่งที่จะใช้เติมรูปร่างของกระดาษที่พับไว้
เพื่อสร้างไฮไลต์และเงาที่สมจริง เรายังเพิ่มเส้นบางๆ รอบๆ ภาพวาดบนกระดาษเพื่อไม่ให้กระดาษหายไป
เมื่อวางบนพื้นหลังที่สว่าง
สิ่งที่เหลืออยู่ตอนนี้คือวาดรูปร่างของกระดาษที่พับด้วย
คุณสมบัติที่เราให้คำจำกัดความไว้ข้างต้น ด้านซ้ายและขวาของกระดาษจะวาดเป็นเส้นตรง ขอบด้านบนและด้านล่างโค้งเพื่อให้รู้สึกเหมือนกระดาษพับ ความโค้งของกระดาษที่งอนี้กำหนดด้วยค่า verticalOutdent
เท่านี้ก็เรียบร้อย ตอนนี้คุณมีการนำทางแบบพลิกหน้าที่ทำงานได้อย่างสมบูรณ์แล้ว
การสาธิตการพลิกหน้า
เอฟเฟ็กต์การพลิกหน้าจะเน้นการสื่อสารความรู้สึก ขณะโต้ตอบที่เหมาะสม ดังนั้นการดูภาพของเอฟเฟกต์นี้จะไม่ได้ผลดีเท่าที่ควร
ขั้นตอนถัดไป
นี่เป็นเพียงตัวอย่างหนึ่งของสิ่งที่ทำได้ด้วยการใช้ฟีเจอร์ของ HTML5 เช่น Canvas Element เราขอแนะนำให้คุณลองดูประสบการณ์จากหนังสือที่ได้รับการปรับแต่งมากขึ้นจากเทคนิคนี้ซึ่งตัดตอนมาจาก www.20thingsilearned.com ซึ่งคุณจะได้เห็นการพลิกหน้าในแอปพลิเคชันจริงและความมีประสิทธิภาพของวิธีนี้เมื่อจับคู่กับฟีเจอร์อื่นๆ ของ HTML5
รายการอ้างอิง
- ข้อกำหนดของ Canvas API