ทำ Animation ให้ไหลลื่นด้วย GSAP และ Velocity.js
หากเราเคยทำ animation โดยใช้ jQuery มาก่อน เราคงจะพอสัมผัสได้ว่า animation ที่สร้างมาจาก CSS Transitions นั้นดูมีความลื่นไหลมากกว่า ด้วยเหตุนี้เอง หลายๆ คนเลยเข้าใจว่า animation ที่สร้างมาจาก JavaScript นั้นช้ากว่า CSS
jQuery ไม่ได้เกิดมาเพื่อ Animation
จริงๆ แล้ว สาเหตุที่ animation ที่สร้างจาก jQuery ดูกระตุกๆ นั้น ไม่ได้เป็นเพราะข้อจำกัดของ JavaScript เลย แต่เป็นเพราะตัว jQuery เอง ที่ไม่ได้เขียนมาเพื่อการทำ animation โดยเฉพาะ (แค่ทำได้ แต่ไม่ดีพอ) หากเราทำ animation ง่ายๆ เราอาจจะไม่เห็นความแตกต่างมากนัก แต่เมื่อ animation ของเราเริ่มมีความซับซ้อนมากขึ้น animation ที่สร้างด้วย jQuery จะเริ่มกระตุกอย่างเห็นได้ชัดเลยทีเดียว
การทำ Animation ด้วย CSS ไม่ได้เร็วไปกว่า JavaScript
จริงอยู่ที่การทำ animation โดยใช้ CSS นั้นมีข้อได้เปรียบในส่วนของ hardware acceleration คือจะสามารถใช้ hardware(GPU) เข้ามาช่วยทำ animation ได้ แต่ก็แค่ในบาง CSS Property เท่านั้น จึงทำให้โค้ด JavaScript ที่เขียนมาดีพอ สามารถที่จะทำ animation ได้ไหลลื่นจนเกือบจะเทียบเท่าหรือบางทีอาจจะเหนือกว่า animation ที่ใช้ CSS เสียด้วยซ้ำ
รู้จักกับ GSAP และ Velocity.js
JavaScript ที่ออกแบบมาสำหรับการทำ animation โดยเฉพาะ ที่น่าสนใจมีดังนี้
- GSAPเป็น JavaScript Library สำหรับทำ HTML5 animation โดยเฉพาะ ที่อ้างว่าเร็วกว่า jQuery ถึง 20 เท่า มี API ต่างๆ ให้เลือกใช้มากมาย เหมาะกับงาน animation ที่มีความซับซ้อนสูง
- Velocity.jsเป็น jQuery plugin ที่ได้รับแรงบันดาลใจมาจาก GSAP อีกที หลักการของ Velocity.js ก็คือการสร้าง API ขึ้นมาใหม่ ที่มีประสิทธิภาพดีกว่า $.animate() จุดเด่นของ Velocity.js นั้นอยู่ที่การใช้งานที่ง่าย และไฟล์มีขนาดเล็กกว่า GSAP มาก
Workshop — เปลี่ยนโค้ด Animation เดิมให้ลื่นขึ้น
การเปลี่ยนโค้ด animation เดิมที่เราเขียนไว้มาใช้ GSAP หรือ Velocity.js นั้นไม่ได้ยากอย่างที่คิด สมมติเดิมเราเขียนโค้ด animation โดยใช้ jQuery animate แบบนี้
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#siamhtml').animate(
/* โค้ด */
);
});
</script>เปลี่ยนมาใช้ GSAP
จริงๆ แล้ว GSAP นั้น มี API เป็นของตัวเอง แต่ถ้าเราไม่อยากไปเรียนรู้อะไรมากมาย เราก็สามารถใช้ GSAP ในรูปแบบของ jQuery plugin ได้ ให้เราเพิ่มไฟล์ JavaScript มา 2 ตัว คือ library ของตัว GSAP เอง แล้วก็ไฟล์ jQuery plugin ของ GSAP
<script type="text/javascript" src="js/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/jquery.gsap.min.js"></script>
<script type="text/javascript">
$(function(){
$('#siamhtml').animate(
/* โค้ด */
);
});
</script>เพียงเท่านี้ โค้ดเดิมของเราก็จะมีผลเหมือนกับการเขียนด้วย API ของ GSAP แล้ว
เปลี่ยนมาใช้ Velocity.js
ส่วนการเปลี่ยนมาใช้ Velocity.js ก็สามารถทำได้ง่ายๆ เช่นกัน ให้เราเพิ่มไฟล์ JavaScript ของ Velocity.js ที่เป็น jQuery plugin เข้าไป จากนั้นให้เราเปลี่ยน $.animate() ในทุกๆ จุด มาเป็น $.velocity() แทน เพียงเท่านี้ก็เรียบร้อยแล้ว
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/julianshapiro/velocity/master/jquery.velocity.min.js"></script>
<script type="text/javascript">
$(function(){
$('#siamhtml').velocity(
/* โค้ด */
);
});
</script>GSAP และ Velocity.js เร็วแค่ไหน ?
หลังจากที่ได้ลองทดสอบประสิทธิภาพของทั้ง GSAP และ Velocity.js ก็พบว่าทั้งคู่นั้นเร็วกว่า jQuery animate อย่างเห็นได้ชัด โดยเฉพาะ animation ที่มีจำนวน element มากๆ แต่ถ้าจะให้เลือกว่าใครดีกว่ากันนั้นก็คงต้องดูที่การใช้งาน GSAP นั้นจะเหมาะกับงาน animation ที่มีความซับซ้อนสูง แต่ถ้างานของเราไม่ได้มีความซับซ้อนอะไรมาก ใช้เพียงแค่ Velocity.js ก็เพียงพอแล้ว
