สวัสดีครับ หายไปนานเพราะงานเข้าเยอะมากๆ ช่วงนี้ก็เลยได้เวลาปล่อยของ เอ้ย ปล่อย
ความรู้ที่ได้รับจากการทำงานเป็นโปรแกรมเมอร์ให้เกมๆนึงทางฝั่งญี่ปุ่น โดยส่วนที่ทำให้
ผมชะงักมากสุดก็คือส่วน javascript ที่เป็นอนิเมชั่นนั้นเอง (ปกติผมเป็น backend php)
เอาล่ะ ใน Part1 นี้ผมจะมาอธิบายในส่วนหลักการพื้นฐานที่ควรรู้ก่อน นั้นคือเรื่อง
เวลาที่อนิเมชั่นจะแสดงผล หรือ timeline frame นั้นเอง
Concept
ปกติการรันอนิเมชั่นก็จะมีการกำหนดไว้ว่า ที่เวลาเท่านั้นเท่านี้หลังจาก start จะให้
ทำอะไร วัตถุเคลื่อนไปทางไหน มีอะไรโผล่ขึ้นมา อะไรหายไป และอีกมากมายที่เป็น
การเปลี่ยนแปลงที่ทำให้เกิดเป็นการเคลื่อนไหว หรือ effect ต่างๆ ดังนั้นก็จะต้องมีการ
plan ว่าที่วินาที 1 จะให้ทำอะไร วินาทีต่อมาทำอะไรต่อ เพื่อให้เกิดเป็นภาพอนิเมชั่น
ขึ้นมาในที่สุด บางครั้งอาจเซตเป็น 0.5 วินาที, 0.1 วินาที หรือน้อยจนระดับ ms (millisecond)
แล้วแต่ความ smooth ของภาพ โดยถ้าเซตเป็น 0.5 วินาทีก็หมายความว่า ใน 1 วินาทีที่ผ่านไป
จะมีการเปลี่ยนแปลงเกิดขึ้น 2 ครั้ง และถ้าเซตเป็น 0.1 วินาทีก็มีการเปลี่ยนแปลงเกิดขึ้น 10 ครั้ง
ภาพก็จะ smooth ดูต่อเนื่องมากยิ่งขึ้น ตรงนี้ก็แล้วแต่จุดประสงค์ของแต่ล่ะคนเลยครับ
และนี้คือ basic code พื้นฐานที่เป็นหัวใจสำคัญในการรันอนิเมชั่นใน javascript ครับ
function animation() { //ชื่อฟังค์ชั่นที่คุมเวลาแสดงอนิเมชั่น
var scene = 0 //กำหนด scene หรือฉากแรกเป็น 0
function framerate() {
scene++ //ให้ฉากเปลี่ยนไปเรื่อยๆ โดยเพิ่มทีล่ะ 1
switch(scene) {
case 1:
//ใส่ function หรือ code ที่ต้องการให้ run เมื่อถึงวินาทีที่1 ตรงนี้
break;
case 2:
//ใส่ function หรือ code ที่ต้องการให้ run เมื่อถึงวินาทีที่2 ตรงนี้
break;
case 3:
//ใส่ function หรือ code ที่ต้องการให้ run เมื่อถึงวินาทีที่3 ตรงนี้
break;
if (scene == 3)
clearInterval(t); //ถ้า scene มาถึงฉากสุดท้าย หรือในที่นี้คือ3 ให้หยุดการทำงาน
// กรณีที่อยากให้วน loop เรื่อยๆไม่หยุด ให้เซต scene = 0;
}
var t = setInterval(framerate,1000); //เรียกใช้ function framerate ทุกๆ1000ms
}
จากข้างบนจะเป็น code สำหรับรันอนิเมชั่น โดยเซตเวลาที่ทำอนิเมชั่นต่อครั้ง = 1 วินาที
(1000ms) และมี timeline การรันอนิเมชั่นอยู่ 3 ครั้ง (ในที่นี้ตามจำนวน case 1-3)
โดยฟังค์ชั่นข้างบนนั้นจะมีการเรียกใช้ได้หลายวิธี ตัวอย่าง เช่น
1.รันเมื่อโหลดหน้าเว็บ พวกรูปภาพ ไฟล์ต่างๆ เสร็จแล้ว
window.onload = function () {
animation();
}
2.รันจากฟังค์ชั่นอื่นๆ (สามารถรันจากฟังค์ชั่นอนิเมชั่นตัวอื่นซ้อนอีกทีก็ได้ จะอธิบาย part ต่อไป)
3.รันจาก html element เมื่อคลิก เช่น < img src="xxx.jpg" onclick="animation();">
4.รันจาก html element เมื่อเมาส์ชี้ เช่น < img src="xxx.jpg" onmouseover="animation();">
5.รันจาก html element เมื่อค่าเปลี่ยน เช่น < input type="text" onchange="animation();">
สำหรับวันนี้ก็จะเป็นการอธิบายในส่วนของ concept เบื้องต้นนะครับ
จริงๆในส่วนนี้ก็สามารถนำไปประยุกต์ใช้ได้เยอะ แต่ถ้ายังไม่หนำใจมีตอนหน้าครับ
จะเป็นตัวอย่างการใช้งานจริงแบบง่ายๆ และตอนถัดไปก็จะเป็นการประยุกต์มากขึ้นอีก
ขอบคุณที่ติดตามครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น