วิธีทำ html animation ด้วย greensock tween js
ตัวอย่าง http://codebee.co.th/labs/examples/greensock-tween-js/
Greensock Tween เป็น tween engine ที่แต่เดิมเกิดจากภาษา action script ที่ใช้สำหรับเขียนโปรแกรมบนแฟรช
ต่อมาได้ถูกพัฒนาให้ใช้งานได้กับภาษา javascript จึงเรียกว่า greensock tween js
จุดเด่นของ Greensock tween คือ ใช้งานง่าย มีความหลากหลายและยืดหยุ่นในการใช้งานมาก ๆ
และที่สำคัญ สามารถทำไปใช้งานได้แบบฟรี ๆ ไม่มีค่าใช้จ่าย
เริ่มใช้งาน Greensock Tween
1. download greensock tween js ได้ที่ https://greensock.com
2. สร้างไฟล์ index.html ขึ้นมาครับแล้วทำการเรียกใช้งาน TweenMax.min.js และ ไฟล์ jquery.min.js
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
3. ต่อไปเราจะลองทำ tween ให้กับรูปดูนะครับ สร้าง tag img มาใน body และตั้งชื่อ class ว่า myimg
4. เขียนคำสั่ง javascript ให้คลาส myimg มี rotation หมุนไปที่ 50 องศา และกลับมาที่ 0 องศาเหมือนเดิม
จะได้โค๊ดประมาณนี้ครับ
หรือถ้าต้องการให้คลาส myimg หมุนแบบต่อเนื่อง ให้เราเปลี่ยนไปใช้ TweenMax และใช้
property repeat ของ TweenMax เข้ามาช่วย จะได้คำสั่งประมาณนี้ครับ
start();
function start()
{
TweenMax.to($(".myimg"), 1, {repeatDelay:0,repeat:10,css:{rotation:360}});
}
เราสามารถเพิ่มรูปแบบของการ tween ได้ด้วยการใส่ property ease ให้กับ tween
เริ่มโดยการเรียกใช้ EasePack.min.js
เพิ่มรูปแบบการทวีน
TweenMax.to($(".myimg"), 1, {repeatDelay:0,repeat:10,css:{rotation:360},ease:Back.easeInOut});
สรุปการใช้งาน
จากตัวอย่างจะใช้งานแค่ rotation เราสามารถ tween ตำแหน่ง x,y หรือ scaleX, scaleY ได้ด้วยนะครับ
หรือแม้แต่ CSS properties พวก background-color, opacity และอื่น ๆ ก็สามารถทวีนได้เช่นกันครับ
ตัวอย่าง http://codebee.co.th/labs/examples/greensock-tween-js/
โค๊ดที่เสร็จแล้ว
Greensock Tween JS 
