การสร้าง animation บน canvas อย่างง่ายๆ

เราสามารถเขียน JavaScript เพื่อสร้าง Animation บน canvas อย่างง่ายๆ ได้ตามตัวอย่าง โดยเราจะใช้ function setInterval() ใน JavaScript เพื่อเรียก function draw()

ส่วนใน function draw() จะเป็น function ที่วาดรูปขึ้นมาใหม่ ในกรณีนี้จะใช้การวาดทับเส้นเดิม แต่เราสามารถที่ใช้ function clearRect() ทำการลบรูปทั้งหมดแล้ววาดใหม่ก็ได้

นี่เป็นหลักการของการวาดรูปใน Canvas ถ้าเราต้องการเปลี่ยนแปลงรูปเราต้องลบทิ้งแล้ววาดใหม่

canvas animation

การใช้ jQuery animate

ในกรณีที่เราต้องการสร้าง animation โดยการเปลี่ยนแปลงค่าใน StyleSheet มากกว่า 1 ตัวเราจะใช้ .animate() เพื่อสร้าง animation ให้กับ element ต่างๆ โดย parameter ตัวแรกจะเป็น Json ที่จะระบุ attribute ต่างๆที่ต้องการเปลี่ยนแปลงค่า เช่นในตัวอย่างจะเป็น เปลี่ยนแปลงความกว้าง, ความสูง และ border-radius

ในกรณีที่เราระบุค่า attribute ที่มีเครื่องหมาย ‘-‘ เราต้องใส่เครื่องหมาย ” ครอบ หรือ เปลี่ยนเป็น Camel Case เช่น border-radius เขียนได้อีกแบบเป็น borderRadius

parameter ตัวที่ 2 จะเป็นระยะเวลาที่สร้าง animation หน่วยเป็น milliseconds ในตัวอย่างจะระบุเป็น 5000 วินาที
jquery animate