HTML5 Animation เพิ่มการเคลื่อนไหวให้รูปภาพ

<h3>HTML5 Animation เพิ่มการเคลื่อนไหวให้รูปภาพด้วย GSAP JS<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;การทำภาพเคลื่อนไหวใน HTML5 Canvas มีให้เราสามารถทำได้หลากหลายวิธี หากเราใช้งาน HTML5 Library<br &sol;>&NewLine;ในการเขียน Web Application หรือ Game ตัวไลบรารี่ส่วนใหญ่จะมีฟังก์ชั่น Tween ให้ใช้งานได้อยู่แล้ว<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<&excl;--more--><br &sol;>&NewLine;<strong>GSAP &lpar;GreenSock Animation Platform&rpar;<&sol;strong> คือ อนิเมชั่นไลบรารี่เพื่อกำหนดรูปแบบการเคลื่อนไหวให้วัตถุต่าง ๆ<br &sol;>&NewLine;ตัวไลบรารี่ถูกออกแบบมาให้ใช้ได้ในหลาย ๆ ภาษาโปรแกรมมิ่ง สำหรับการเขียนโปรแกรมบน HTML5 Canvas<br &sol;>&NewLine;GSAP ก็มีไลบรารี่ที่สามารถใช้งานโดยภาษา Javascript ได้เช่นกัน<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;greensock&period;com" target&equals;"&lowbar;blank"><strong>ติดตั้งและดาวโหลด Greensock Tween JS<&sol;strong><&sol;a><br &sol;>&NewLine;ดาวน์โหลด Greensock Tween Library จากเว็บไซต์หลัก ไฟล์ไลบรารี่จะมีหลาย ๆ ตัวให้ใช้งาน<br &sol;>&NewLine;เลือกมาแค่ตัวเดียว สามารถใช้ได้ทั้ง TweenMax และ TweenLite<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>ทดสอบทำรูปภาพให้เคลื่อนไหวด้วย Greensock Tween JS<&sol;h4>&NewLine;<p>เริ่มต้นให้ include ใช้งาน Jquery และ Greenock JS<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;script src&equals;"https&colon;&sol;&sol;ajax&period;googleapis&period;com&sol;ajax&sol;libs&sol;jquery&sol;3&period;1&period;0&sol;jquery&period;min&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi; &NewLine;&lt&semi;script src&equals;"https&colon;&sol;&sol;cdnjs&period;cloudflare&period;com&sol;ajax&sol;libs&sol;gsap&sol;1&period;19&period;0&sol;TweenMax&period;min&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;ทำการ add event &&num;8220&semi;tick&&num;8221&semi; และให้ทำงาน callback function ชื่อว่า animate<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;TweenMax&period;ticker&period;addEventListener&lpar;"tick"&comma; animate&rpar;&semi; &NewLine;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;ในฟังก์ชั่น animate ใช้คำสั่ง clearRect เพื่อลบวัตถุในตำแหน่งต่าง ๆ ของ canvas และใช้คำสั่ง drawImage<br &sol;>&NewLine;เพื่อวาดรูปใหม่และกำหนดตำแหน่งใหม่ทุกครั้ง<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >function animate&lpar;&rpar; &lbrace; &NewLine;&Tab;context&period;clearRect&lpar;0&comma;0&comma;640&comma;480&rpar;&semi; &NewLine;&Tab;context&period;drawImage&lpar;img&comma; img&period;xpos&comma; img&period;ypos&rpar;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;ใช้คำสั่งของ TweenMax กำหนดตำแหน่งของรูปในแนวก่อน ypos<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;TweenMax&period;to&lpar;img&comma; 9&comma; &lbrace;ypos&colon;400&rcub;&rpar;&semi; &NewLine;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ตัวอย่างการเคลื่อนไหวโดยใช้ GSAP<&sol;h4>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;HTML5-เพิ่มอนิเมชั่นการเคลื่นไหวให้-Context2D-ด้วย-GSAP-JS&period;html" target&equals;"&lowbar;blank">HTML5-เพิ่มอนิเมชั่นการเคลื่นไหวให้-Context2D-ด้วย-GSAP-JS&period;html<&sol;a><br &sol;>&NewLine;<iframe src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;HTML5-เพิ่มอนิเมชั่นการเคลื่นไหวให้-Context2D-ด้วย-GSAP-JS&period;html" width&equals;"640" height&equals;"480" scrolling&equals;"no" frameborder&equals;"0"><&sol;iframe><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;