วันนี้อาจารย์จะมาสอนการเขียนแอปพลิเคชันบนมือถือ iOS และ Android ด้วยเครื่องมือ Solar2D

วันนี้อาจารย์จะมาสอนการเขียนแอปพลิเคชันบนมือถือ iOS และ Android ด้วยเครื่องมือ Solar2D ว่าด้วยเรื่องการทำอนิเมชั่นนะครับ ใครสนใจที่จะทำอนิเมชั่นบนมือถือเนี่ย ไปติดตามกันดูได้เลยครับ หลังจับรอบที่แล้วเราโหลดภาพแมวไปแล้วนะครับ วันนี้เนี่ยอาจารย์จะมาลองโหลดภาพ PNG นะฮะ ภาพเดี่ยว 13 ของพี่โน้ตนะครับ ที่เป็นกระแสอยู่ตอนนี้ เราลองเอามาเขียนเป็นแอปพลิเคชันดู ก็ใช้ Solar2D เหมือนเดิมครับ เปิด Solar2D Simulator ขึ้นมา แล้วก็เริ่มจากการโหลดภาพเข้ามาในแอปพลิเคชันเหมือนเดิมครับ เรามีไฟล์ภาพเดี่ยว 13 แล้วใช่ไหมครับ แล้วก็เริ่มเลย local diew13 = display.newImageRect("diew13.png", 150, 150) แค่นี้เราก็จะโหลดภาพเดี่ยวมาได้ละ แต่จะเห็นว่ามันจะไม่ได้อยู่กลางจอนะครับ เนื่องจากเรายังไม่ได้กำหนดพิกัด เราก็เพิ่มเข้าไปครับ diew13.x = display.contentCenterX diew13.y = 150 เซฟครับ ก็จะเห็นว่ารูปภาพเดี่ยวเนี่ยมาอยู่ตรงกลางจอละ แล้วก็ระยะ Y เนี่ยวัดจากด้านบนเนี่ยนะครับ ประมาณ 150 พิกเซล หลังจากนั้นครับ อาจารย์จะเพิ่มคำสั่ง Transition เข้าไป Transition คือการทำอนิเมชั่นโดยที่ทำได้หลายอย่างครับ เช่น เลื่อนซ้ายไปขวา เลื่อนบนลงล่าง ขยายใหญ่ หด ย่อ หมุน ตอนนี้อาจารย์จะยกตัวอย่างการเลื่อนอนิเมชั่นให้กับรูปภาพเดี่ยว 13 นี้ โดยเริ่มจากคำสั่ง Transition ครับ คำสั่ง Transition เนี่ยก็จะมีหลายอย่างนะครับ นี้อาจารย์จะใช้ Transition.to Transition.to เนี่ยต้องการแค่ Target ก็คือเราจะ Transition อะไร diew13 อย่างงี้ Transition diew13 นะครับ พารามมันจะเป็น Table ใส่ปีกกาเข้าไปอย่างงี้ เริ่มจากความหน่วงนะครับ หมายความว่าระยะเวลาที่ใช้ในการทำ Transition เนี่ย Time อาจารย์เท่ากับ 300 มิลลิเซก แล้วก็ต้องการ Transition อะไร อาจารย์จะเลื่อนค่า Y จากบนลงล่าง จาก 150 เนี่ยเพิ่มเป็นสัก 200 นะครับ แบบนี้ พอเซฟปั๊บ ก็จะเห็นว่าภาพเนี่ยเลื่อนลงมานะครับ แต่ว่ามันยังดูแข็งๆ หน่อยนะครับ ทีนี้เราลอง Y มากกว่านี้หน่อย 300 ดู อ่า มันจะแข็งๆ นะครับ เนื่องจาก Transition มันจะมีพารามิเตอร์นึงชื่อว่า Easing นะครับ หรือการเหวี่ยงของมันเนี่ยจะเป็นแบบไหน ตอนนี้อาจารย์จะยกตัวอย่างการเลื่อนอนิเมชั่นให้กับรูปภาพเดี่ยว 13 นี้ โดยเริ่มจากคำสั่ง Transition ครับ เราใส่เพิ่มเข้าไปครับ Transition เท่ากับ อาจารย์ลองตัวอย่าง Transition เท่ากับ Easing.outExpo มันเป็นยังไงไปดูกันครับ อ่า ก็จะเห็นว่าตัวไอคอนเดี่ยว 13 เนี่ย จะมีการเลื่อนลงมาเร็วแต่ค่อยๆ หยุด นั่นคือ Exponential นะครับ แบบนี้ ทีนี้ถ้าเราอยากได้แบบเป็นแบบ Linear ครับ ก็จะเห็นว่ามันเคลื่อนที่มาด้วยความเร็วเท่าเดิมเลย จริงๆ Easing เนี่ยมีอีกเยอะแยะมากมายนะครับ อาจารย์จะยกตัวอย่างมาแค่ไอที่มันดูแล้วมันสังเกตเห็นง่าย ลองมาดู Easing แบบ outElastic กันครับ อ่า แบบนี้ อาจารย์ลองเซฟดูนะ ดึ๋ง อ่า ก็จะเป็นแบบว่า เป็น Transition แบบกระเด้งและกลับไปกลับมาจนกลับเข้ามาอยู่ในจุดที่เป็นจุดเป้าหมาย ก็เป็นการทำ Transition แบบง่ายๆ นะครับ ลองไปปรับใช้กันดู สำหรับคนที่สนใจเขียนแอปพลิเคชันบนมือถือนะครับ กดหัวใจกดติดตามไว้ครับ