ผมไปเจอปลั๊กอินของ jQuery ตัวหนึ่งชื่อว่า spritely เป็นปลักอินที่ไว้สำหรับสร้างแอนิเมชั่นบนหน้าเว็บ น่าสนใจจริงๆครับปลักอินตัวนี้
จากคำกล่าวที่ว่า 1 ภาพสามารถแทนได้คำพูดได้ หนึ่งล้านคำ ผมก็ขออาศัยคำนี้มาใช้หน่อย เพราะผมคิดว่าให้ท่านดู Live Demo น่าจะอธิบายสิ่งที่ปลั๊กอินนี้ทำได้ ดีกว่าผมนั่งอธิบายจนน้ำลายเปรอะเป็นกระโถน
คลิกดูครับ Live Demo หรือจะดูที่นี่ก็ได้ http://www.quadrifogliorosso.com
ดาวน์โหลดโค้ดตัวอย่างที่ผมทำไว้ และไฟล์ที่จะใช้ในการสอนบทนี้
หลังจากดูตัวอย่างกันพอให้น้ำลายสอแล้ว เราก็เดินทางกันต่อดีกว่าครับ
หลักการทำงาน จะคล้ายๆ กับที่เราสร้างภาพ .gif คือสร้างภาพนิ่งหลายๆภาพ โดยแต่ละภาพก็ให้มีส่วนใดส่วนหนึ่ง แตกต่างออกไป เมื่อเอาภาพมาเรียงต่อกันแล้วเล่นต่อเนื่อง มันก็จะเป็นภาพเคลื่อนไหว
ปลักอินตัวนี้ประกอบไปด้วย method หลักๆ 3 ตัว คือ
.pan() ไว้สำหรับทำฉากหลังเคลื่อนที่ เหมือนการแพนกล้อง
.sprite() สำหรับทำให้วัตถุเคลื่อนไหว
.spRandom() สำหรับทำให้วัตถุเคลื่อนที่ เคลื่อนตำแหน่ง
ว่าแล้วก็มาดู วิธีสร้างฉากหลังกันก่อน
1. อินคลูดไฟล์ jQuery ที่จำเป็นเข้ามาก่อน
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.spritely-0.1.js"></script> |
2. สร้าง div id=clound เปล่าๆขึ้นมาตัวนึง ภาพและรายละเอียดต่างๆ เราจะต้องไปกำหนดในส่วนของ css
<div id="clound"></div> |
3. ตกแต่งรายละเอียดฉากของเรา
<style type="text/css"> body{background:#0033FF;} #clound{ background:url(cloud.png); height:114px; width:100%; } </style> |
เปลี่ยนสีหน้าเว็บให้เป็นสีน้ำเงิน ถ้าไม่เปลี่ยนเดี๋ยวเราจะมองไม่เห็นก้อนเมฆลอยล่องของเรา กำหนดความสูงให้เท่ากับภาพที่จะนำมาทำฉาก และกำหนดความกว้างล่อซะให้เต็มหน้าเลย
4. เรียกใช้ปลั๊กอิน ก้อนเมฆเราจะได้วิ่งปริ้ดๆ
<script type="text/javascript"> $(document).ready(function() { $('#clound').pan({fps: 30, speed: 2, dir: 'left'}); }); </script> |
fps คือ frame per second ให้แสดงกี่เฟรมต่อวินาที
speed คือ ความเร็ว ตัวเลขยิ่งมากยิ่งวิ่งเร็ว
dir คือ direction ทิศทางในการเคลื่อนที่
โค้ดทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.spritely-0.1.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#clound').pan({fps: 30, speed: 2, dir: 'left'}); }); </script> <title>Sprite</title> <style type="text/css"> body{background:#0033FF;} #clound{ background:url(cloud.png); height:114px; width:100%; } </style> </head> <body> <div id="clound"></div> </body> </html> |
เมื่อท่านทำมาถึงตอนนี้ แล้วลองรันดูนะครับ ท่านจะได้เห็นก้อนเมฆค่อยๆลอยเคลื่อนตัวไปทางซ้าย บนท้องฟ้า ที่สำคัญ ไม่กระตุกนะเฮีย
เอาละสร้างฉากหลังเสร็จแล้ว ถ้าไม่มีอะไรลอยๆอยู่เหนือก้อนเมฆสักหน่อย ก็ดูเหมือนจะขาดชีวิตชีวา
5. เพิ่ม div ขึ้นมาอีกตัว เพื่อทำบอลลูน
<div id="balloon"></div> |
6. ตกแต่งสีสรร
#balloon { background:url("balloon.png") no-repeat scroll left top transparent; height:118px; width:82px; position:absolute; } |
ถ้าท่านดูภาพลูกโป่งที่ผมให้ดาวน์โหลดไป ท่านจะเห็นว่าในภาพนั้นประกอบไปด้วยลูกโป่ง 3 ลูกเหมือนๆกัน ถ้าเปลี่ยนเป็นภาพนก ท่านจะเข้าใจได้ทันทีว่าทำไมต้องใช้ 3 ภาพ ภาพแรกนกหุบปีก ภาพสองกำลังกางปีกหน่อยหนึ่ง ภาพสามกำลังบิน เมื่อนำมาเล่นต่อเนื่องไปเรื่อยๆ ท่านก็จะเห็นภาพนกบินตีปีกพั่บๆๆๆๆๆ (เสียงนกตีปีก ไม่ใช่เสียงเปิดบริสุทธิ์)
height ให้มีขนาดเท่ากับความสูงของภาพ
width ให้มีขนาด เศษ 1 ส่วน 3 ของภาพ ก็เพราะมันมี 3 ภาพ ใน 1 ภาพ (อธิบายได้ไม่งงเนอะ)
position ต้องเป็น absolute ลูกโป่งเราจะได้ลอยได้
7. เรียกใช้ปลักอิน สร้างลูกโป่งเคลื่อนไหว
$('#balloon') .sprite({fps: 3, no_of_frames: 3}) .spRandom({ top: 20, left: 100, right: 978, bottom: 150, speed: 8500, pause: 1000 }); |
.sprite สำหรับกำหนดว่าจะให้แสดงกี่เฟรมต่อวินาที และภาพที่เราเตรียมไว้มีกี่เฟรม
.spRandom สำหรับกำหนดบริเวณให้ลูกโป่งลอยไปลอยมา ถ้าท่านต้องการให้มันอยู่กับที่ ก็ไม่จำเป็นจะ้ต้องใช้ method นี้
โค้ดทั้งหมดทั้งสิ้น
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.spritely-0.1.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#clound').pan({fps: 30, speed: 2, dir: 'left'}); $('#balloon') .sprite({fps: 3, no_of_frames: 3}) .spRandom({ top: 20, left: 100, right: 978, bottom: 150, speed: 8500, pause: 1000 }); }); </script> <title>Sprite</title> <style type="text/css"> body{background:#0033FF;} #clound{ background:url(cloud.png); height:114px; width:100%; } #balloon { background:url("balloon.png") no-repeat scroll left top transparent; height:118px; width:82px; position:absolute; } </style> </head> <body> <div id="clound"></div> <div id="balloon"></div> </body> </html> |
แหล่งข้อมูลอ้างอิง :
http://www.spritely.net/