บทนำ
ในปี 2010 F-i.com และทีม Google Chrome ได้ร่วมกันพัฒนาเว็บแอปด้านการศึกษาที่ใช้ HTML5 ชื่อ 20 Things I Learned about Browsers and the Web (www.20thingsilearned.com) แนวคิดหลักอย่างหนึ่งที่อยู่เบื้องหลังโปรเจ็กต์นี้คือ การนำเสนอในบริบทของหนังสือจะเหมาะที่สุด เนื่องจากเนื้อหาของหนังสือเกี่ยวข้องกับเทคโนโลยีเว็บแบบเปิดเป็นอย่างมาก เราจึงคิดว่าการทำให้คอนเทนเนอร์เป็นตัวอย่างของสิ่งที่เทคโนโลยีเหล่านี้ช่วยให้เราบรรลุเป้าหมายได้ในวันนี้เป็นสิ่งสำคัญ
เราตัดสินใจว่าวิธีที่ดีที่สุดในการทำให้รู้สึกเหมือนกำลังอ่านหนังสือจริงคือการจำลองประสบการณ์การอ่านแบบอนาล็อกที่ยอดเยี่ยมไปพร้อมกับใช้ประโยชน์จากโลกดิจิทัลในด้านต่างๆ เช่น การนำทาง เราทุ่มเทความพยายามอย่างมากในการจัดการขั้นตอนในการอ่านแบบกราฟิกและอินเทอร์แอกทีฟ โดยเฉพาะการพลิกหน้าหนังสือจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง
เริ่มต้นใช้งาน
บทแนะนำนี้จะอธิบายขั้นตอนการสร้างเอฟเฟกต์การพลิกหน้าของคุณเองโดยใช้องค์ประกอบ Canvas และ 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>
เรามีองค์ประกอบคอนเทนเนอร์หลัก 1 รายการสําหรับหนังสือ ซึ่งประกอบด้วยหน้าต่างๆ ของหนังสือและองค์ประกอบ canvas ที่เราจะใช้วาดหน้าหนังสือที่พลิก ภายในองค์ประกอบ section มี div Wrapper สำหรับเนื้อหา เราต้องใช้สิ่งนี้เพื่อเปลี่ยนความกว้างของหน้าโดยไม่ส่งผลต่อเลย์เอาต์ของเนื้อหา 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
});
}
ก่อนอื่นเราต้องตรวจสอบว่าหน้าเว็บวางซ้อนกันอย่างถูกต้องโดยจัดระเบียบ 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 && 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 เราจะเริ่มต้นด้วยการตรวจสอบว่ามีการกดเมาส์ลงที่หน้าซ้ายหรือขวาเพื่อให้ทราบว่าเราต้องเริ่มพลิกไปทางใด นอกจากนี้ เรายังตรวจสอบด้วยว่ามีหน้าอื่นในทิศทางนั้นเนื่องจากเราอาจอยู่ที่หน้าแรกหรือหน้าสุดท้าย หากมีตัวเลือกการพลิกที่ถูกต้องหลังจากการตรวจสอบเหล่านี้ เราจะตั้งค่า Flag 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 เราจะรีเซ็ตแคนวาสโดยใช้เมธอด clearRect(x,y,w,h) การล้างภาพแคนวาสทั้งผืนจะส่งผลเสียต่อประสิทธิภาพอย่างมาก และจะเป็นการล้างเฉพาะบริเวณที่เราวาดจะมีประสิทธิภาพมากกว่า เราจะล้างภาพทั้งผืนเพื่อไม่ให้บทแนะนำนี้นอกประเด็น
หากมีการลากการพลิก เราจะอัปเดตค่า target ให้ตรงกับตำแหน่งเมาส์แต่ใช้มาตราส่วน -1 ถึง 1 แทนพิกเซลจริง
นอกจากนี้ เรายังเพิ่ม progress ขึ้นตามเศษส่วนของระยะทางจาก target ด้วย ซึ่งจะทำให้การพลิกเป็นไปอย่างราบรื่นและเป็นภาพเคลื่อนไหวเนื่องจากมีการอัปเดตในทุกเฟรม
เนื่องจากเราจะตรวจสอบ flips ทั้งหมดในเฟรมทุกเฟรม เราจึงต้องตรวจสอบว่าวาดเฉพาะ 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 เราขอแนะนําให้คุณดูประสบการณ์การใช้งานสมุดภาพที่ได้รับการขัดเกลามากขึ้นซึ่งเทคนิคนี้นำมาจากเว็บไซต์ www.20thingsilearned.com ซึ่งคุณจะเห็นว่าการพลิกหน้าเว็บใช้งานได้จริงในการใช้งานจริงและมีประสิทธิภาพเพียงใดเมื่อใช้ร่วมกับฟีเจอร์ HTML5 อื่นๆ
ข้อมูลอ้างอิง
- ข้อกำหนดของ Canvas API