ผมไปเจอปลั๊กอินของ 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/

jQuery jquery plugin Live Demo
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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