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

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

การทำภาพเคลื่อนไหวใน HTML5 Canvas มีให้เราสามารถทำได้หลากหลายวิธี หากเราใช้งาน HTML5 Library
ในการเขียน Web Application หรือ Game ตัวไลบรารี่ส่วนใหญ่จะมีฟังก์ชั่น Tween ให้ใช้งานได้อยู่แล้ว

GSAP (GreenSock Animation Platform) คือ อนิเมชั่นไลบรารี่เพื่อกำหนดรูปแบบการเคลื่อนไหวให้วัตถุต่าง ๆ
ตัวไลบรารี่ถูกออกแบบมาให้ใช้ได้ในหลาย ๆ ภาษาโปรแกรมมิ่ง สำหรับการเขียนโปรแกรมบน HTML5 Canvas
GSAP ก็มีไลบรารี่ที่สามารถใช้งานโดยภาษา Javascript ได้เช่นกัน

ติดตั้งและดาวโหลด Greensock Tween JS
ดาวน์โหลด Greensock Tween Library จากเว็บไซต์หลัก ไฟล์ไลบรารี่จะมีหลาย ๆ ตัวให้ใช้งาน
เลือกมาแค่ตัวเดียว สามารถใช้ได้ทั้ง TweenMax และ TweenLite

ทดสอบทำรูปภาพให้เคลื่อนไหวด้วย Greensock Tween JS

เริ่มต้นให้ include ใช้งาน Jquery และ Greenock JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

ทำการ add event “tick” และให้ทำงาน callback function ชื่อว่า animate

TweenMax.ticker.addEventListener("tick", animate);

ในฟังก์ชั่น animate ใช้คำสั่ง clearRect เพื่อลบวัตถุในตำแหน่งต่าง ๆ ของ canvas และใช้คำสั่ง drawImage
เพื่อวาดรูปใหม่และกำหนดตำแหน่งใหม่ทุกครั้ง

function animate() {
	context.clearRect(0,0,640,480);
	context.drawImage(img, img.xpos, img.ypos);
}

ใช้คำสั่งของ TweenMax กำหนดตำแหน่งของรูปในแนวก่อน ypos

TweenMax.to(img, 9, {ypos:400});

ตัวอย่างการเคลื่อนไหวโดยใช้ GSAP

HTML5-เพิ่มอนิเมชั่นการเคลื่นไหวให้-Context2D-ด้วย-GSAP-JS.html

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