ทำความเข้าใจ CSS3 Animations เบื้องต้น

ไม่ว่าจะช้า หรือเร็ว สุดท้ายแล้ว CSS Designer ส่วนใหญ่ก็คงต้องเดินไปถึงจุดนั้นอยู่ดี จุดนั้นในที่นี้ ผมหมายถึงเรื่องของ CSS3 และการทำ Animation ตามท้องเรื่อง เว้นเสียแต่ว่า “ไม่มีความจำเป็นใดใด” ที่ต้องทำ เอาเป็นว่านำเสนอไว้เผื่อเกิดความจำเป็นก็แล้วกันนะครับ แม้ว่ามันจะ ขาดๆ เกินๆ บ้าๆ บวมๆ ก็ตาม

ในบทความนี้ ผมขอพูดถึงเรื่อง พื้นๆ เพื่อเริ่มสร้างความเข้าใจกันไปก่อนนะครับ

คำสั่งพื้นฐานของ Animation ใน CSS3 มีดังนี้

• animation-name คือ การตั้งชื่อให้กับรูปแบบการแสดงการเคลื่อนไหว
• animation-duration คือ ระยะเวลาของการเคลื่อนไหว จาก ต้นทาง ไป ปลายทาง
• animation-timing-function คือ รูปแบบการเล่นใน 1 รอบของการเคลื่อนไหวของ keyframe
• animation-iteration-count คือ การทำซ้ำ เช่น จะให้ทำกี่รอบ หรือ infinite คือ วนไม่หยุด
• animation-direction คือ การสั่งทิศทางการเล่น เช่น จาก 1 ถึง 10 หรือจะให้เล่นถอยหลัง จาก 10 มา 1
• animation-delay คือ จะให้เริ่มทำทันที หรือ ดีเลย์ ตามเวลาที่กำหนด เช่น ถ้าเรากดปุ่มแล้วต้องการให้ animation ที่เราสั่งงานเริ่มเล่นเมื่อเวลาผ่านไปหลังจากกดปุ่ม 2 วินาที เราสามารถกำหนดได้ใน animation-delay โดยค่าเริ่มต้นคือ 0 ซึ่งเป็นการสั่งให้เล่นทันที
• animation คือ shorthand property หรือการเขียนแบบย่อ โดยการใส่ค่าควรเรียงลำดับจาก <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>

เมื่อเรารู้แล้วว่า คำสั่งของแต่ละอย่างมันคืออะไรบ้าง ต่อไปมาดูการใช้คำสั่งต่างๆ นั้นในตัวอย่างกัน

ก่อนอื่น ให้ท่านคลิ๊กไปดูตัวอย่างการเขียน CSS3 2D Animation แล้วค่อยๆ นั่งทำความเข้าใจไปด้วยนะครับ (สำหรับ Safari และ Chrome เท่านั้นนะครับ)

ตามตัวอย่างนั้น เป็นการเขียน CSS3 ที่ไม่ได้ยุ่งยากอะไรมากมาย เพราะเป็นแค่การสั่งให้ Element ใดๆ ที่มี พื้นหลัง นั้นเกิดการเคลื่อนไหว (ยังไม่มีส่วนใดเกี่ยวกับ tag canvas ของ html5) เพราะฉะนั้นแล้ว จะเห็นได้ว่า ผมเขียน HTML เพียงนิดเดียว

ตัวอย่าง HTML

<div class="container">
	<div></div>
	<div></div>
	<div class="รถ">
		<i></i>
		<i></i>
	</div>
</div>
<div class="หญ้า"></div>

แล้วมันวิ่งกันได้ยังไง

หลักการทำงานของ CSS3 Animations ก็คือ 1. สร้าง Animation name และ 2. Add Keyframe ซึ่งเมื่อเราสร้าง Animation name แล้ว เราสามารถที่จะเพิ่มคำสั่งให้ animation ที่เราสร้างขึ้นมานั้น ทำงานในรูปแบบต่างๆ ด้วยคำสั่งที่เราต้องการ เช่น ในตัวอย่าง

.container>div:nth-child(1) {
	-webkit-animation: night 40s linear infinite;/*สำหรับสั่งงาน -Webkit-*/
	animation: night 40s linear  infinite; /*ใช้งานจริง*/
}

เพื่อไม่ให้เป็นการสร้างความสับสน ตัวอย่างด้านล่าง ผมจะยกมาเฉพาะ คำสั่งที่มี Prefix -webkit- นะครับ

จากคำสั่งด้านบน .container>div:nth-child(1) {...} อ่านว่า : div ที่เป็นลูกคนที่ 1 ของแม่ที่มี class เป็นประเภท container ให้กระทำการ …

-webkit-animation: night 40s linear infinite;

การเขียนโค้ด แบบ shorthand ด้านบนนั้น แยกออกมาเป็น แบบเต็มๆ ได้โดยอ้างอิงตามกฎที่ถูกกำหนดมา เป็นไปได้ควรเรียงลำดับจาก <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> ถ้าเราไม่มีค่าใด ที่ต้องสั่งเราก็ไม่จำเป็นต้องสั่งเข้ามา

ผมเริ่มสั่งงานจาก animation-name = night, animation-duration = 40 วินาที, animation-timing-function = linear, animation-iteration-count = infinite คือ ให้ animation นี้ มีชื่อว่า night ให้แสดงในหนึ่งรอบเป็นเวลา 40 วินาที รูปแบบการเชื่อมต่อระหว่างรอบของ animation นั้นให้เป็นแบบ linear และจำนวนการวนรอบแสดงผลคือ ไม่จำกัด (infinite)

ค่าพื้นฐานของคำสั่ง มีดังนี้

1. animation-name

   การตั้งชื่อให้กับ Animation ตั้งยังไงก็ได้ ให้ดูความเหมาะสมของงานนะครับ

2. animation-duration

   ระยะเวลาเล่นใน 1 รอบ ให้ใส่เป็นวินาที

3. animation-timing-function

   คือรูปแบบการเชื่อมต่อของ animation ในแต่ละรอบ

   ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

   ค่าพื้นฐานที่ W3C ให้มาคือ ease

4. animation-iteration-count

   คือ จำนวนรอบที่ต้องการให้แสดง ให้สั่งโดยการใส่เป็นตัวเลข เช่นอยากให้วน 10 รอบก็ใส่ เลข 10 และถ้าอยากให้วนจนเมากันไปข้างก็ใส่ infinite

   ค่าพื้นฐานที่ W3C ให้มาคือ 1

5. animation-direction

   คือการสั่งทิศทางการเคลื่อนไหว มี normal | alternate ซึ่งค่าพื้นฐานคือ normal

6. animation-delay

   คือ คำสั่งเริ่มการทำงาน หรือจะให้ ดีเลย์ ค่าพื้นฐานคือ เริ่มเลย โดยการสั่งให้สั่งเป็นวินาที

การ Add Keyframes ให้กับ Animation

เราสามารถที่จะสร้างรูปแบบการเคลื่อนไหวให้แก่ Object ก่อน หรือ สร้าง Keyframes ขึ้นมาก่อนก็ได้ แล้วแต่ความถนัดส่วนบุคคล โดยในที่นี้ ผม add keyframes เข้าไปทีหลัง การเคลื่อนไหวของ ของ แต่ละอย่างนั้น จะเริ่มนับจากจุด เริ่ม ไปยังจุด สิ้นสุด โดยที่เราเป็นคนกำหนดเอง เราสามารถกำหนดว่า เริ่มจาก A ไปยัง B ให้ใช้ A เป็นจุดที่ 0% และ B เป็นจุดที่ 100% ของการเดินทาง โดยในระหว่างทางที่เดินนั้น เราสามารถเพิ่มคำสั่งงาน Animation ได้อีกใน Keyframes นั้นๆ

จากโค้ด ตัวอย่าง ที่ผมสั่งงาน Animation named Night

@-webkit-keyframes night {
 	0%
	{
		background-position: 0px 0;
	}
	50% {
		background-position: -1000px 0;
	}
	100%
	{
		background-position: -2000px 0;
	}
}

คือ จุดที่ 0% นั้น ผมให้ background-position: อยู่ที่ตำแหน่ง 0 0; พอไปถึงที่ 50% เปลี่ยนเป็น -1000px 0; คือ พื้นหลังที่เป็นรูปต้นไม้ในเวลากลางคือนั้น เดินจากทางขวาย้อนมาทางซ้าย จนถึง 100% ที่ -2000px 0; ปรากฏการณ์นี้คือ พื้นหลัง วิ่งได้

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

ในตัวอย่างนั้น สังเกตได้ว่า ผมเขียน div เอาไว้สองตัว เพื่อสับขาหลอกการแสดงผล ความกว้างของภาพพื้นหลังนั้นคือ 2000px โดยที่ div ทั้งสองตัวนั้น อยู่ นิ่งๆ สิ่งที่วิ่งไม่ใช่ div แต่เป็น พื้นหลัง (background) ต่างหากที่วิ่ง โดยพื้นหลังของทั้งสอง div นั้นมีการเคลื่อนไหวที่ แปรผกผันกัน จึงทำให้การเคลื่อนไหวลงตัวพอดี

@-webkit-keyframes night {
 	0%
	{
		background-position: 0px 0;
	}
	50% {
		background-position: -1000px 0;
	}
	100%
	{
		background-position: -2000px 0;
	}
}
@-webkit-keyframes night2 {
 	0%
	{
		background-position:  2000px 0;
	}
	50% {
		background-position: 1000px 0;
	}
	100%
	{
		background-position: 0px 0;
	}
}

ดูเหมือนจะยุ่งยาก นะครับแต่จริงๆ มันง่ายครับ ง่ายกว่าเขียน HTML เยอะเลย

ผมขอเบรก เอาไว้แค่นี้ก่อนนะครับ สำหรับการเคลื่อนไหวของ ตัวรถ ใช้หลักการเขียนเดียวกัน โดยสิ่งที่จะแตกต่างนั้น อยู่ที่การ หมุน ของล้อรถ ซึ่งมันมีเรื่องของ CSS3 2D Transforms Module เข้ามาเกี่ยวข้อง เอาไว้บทความต่อไปผมจะมาอธิบายกันเพื่อความต่อเนื่อง อีกครั้งครับ

มีความสุขกับการใช้ชีวิตครับ