Animation Library คืออะไร
nimation Library เป็น Library ที่ใช้สำหรับทำ animation ซึ่งโดยปกติเราจะมักจะใช้ CSS ในการทำ animation แต่ยิ่งการทำ animation มีความซับซ้อนมากขึ้นเท่าไหร่เราก็ยิ่งมีความจำเป็นที่จะต้องใช้ JavaScript เข้ามาช่วยในการทำ animation
CSS VS JavaScript Animations
ทั้ง CSS และ JavaScript จะมีข้อดีและข้อเสียแตกต่างกัน โดยเรามีข้อสังเกตในการเลือกใช้งานว่าควรเลือกใช้ดังนี้
- ใช้ CSS เมื่อ animation มีความซับซ้อนไม่สูงมาก หรือ animation นั้นมีความจำเป็นต้องทำงานได้ต่อให้ปิดการทำงานของ JavaScript
- ใช้ JavaScript เมื่อ animation มีความซับซ้อน หรือไม่สามารถใช้ CSS สร้างได้ หรือเมื่อทำงานบน JavaScript แล้วมีประสิทธิภาพที่ดีกว่าการทำงานบน CSS
และในการทำ animation สิ่งที่เราควรระวังคือ การทำให้ animation ของเรานั้นมี framerate เกิน 60 fps เนื่องจากจอภาพของอุปกรณ์ส่วนใหญ่ที่เราใช้ในปัจจุบันมีมักจะ framerate อยู่ที่ 60 fps เพราะหาก animation ที่เราสร้างขึ้นมามี framerate ต่ำกว่า framerate ของจอของอุปกรณ์ที่ใช้งานมาก ๆ จะส่งผลกระทบต่อประสบการณ์ในแง่ลบต่อการใช้งานของผู้ใช้งานในที่สุด โดยทั้ง CSS และ JavaScript
เริ่มต้นใช้งาน anime.js
จากเว็บไซต์ของ Anime.js เองได้อธิบายเกี่ยวกับตัวของ Library นี้ไว้ว่าเป็น JavaScript animation library ซึ่งสามารถใช้งานได้ง่าย แต่ยังทรงสามารถทำงานได้อย่างมีประสิทธิภาพ โดย Library นี้จะทำงานกับ CSS properties, SVG, DOM attribute และ JavaScript Object โดย anime.js มี Web Browser รองรับดังนี้
สร้าง animation จาก anime.js
หากเราต้องการทดลองสร้าง animation แต่ยังไม่ได้ต้องการนำไปใช้งานจริงๆ เราสามารถใช้ codepen.io ในการสร้างขึ้นมาก่อนได้ หรือหากต้องการใช้งาน anime.js ให้ทำการติดตั้ง Library ผ่าน npm โดยใช้คำสั่งต่อไปนี้
npm install animejs –saveแต่ในเพื่อความสะดวกในการเขียนบทความนี้ทางผู้เขียนจะเลือกใช้งานผ่านทาง codepen.io โดยหากเราทำการใช้งานผ่าน codepen.io เราต้องทำการเพิ่ม script ของ anime.js ลงไปในการตั้งค่าของ codepen.io ก่อน
โดยการไปที่ Pen Setting แล้วเลือก JS หลังจากนั้นให้ไปที่ Add External Scripts/Pens แล้วค้นหาและทำการทำการเพิ่ม anime.js ลงไป
ในหน้าของ codepen.io ที่ส่วนของ HTML ให้ทำการสร้างสี่เหลี่ยมขึ้นมาโดยการใช้ div ดังนี้
หลังจากนั้นให้กำหนดค่าต่างๆ ของ CSS ขึ้นมาดังนี้
และในส่วนของ JavaScript เราจะทำการเรียกใช้ anime.js โดยเลือกเป้าหมายไปที่ element ที่มี class ที่ชื่อ square ซึ่งเป็น div ที่เราได้สร้างไว้ใน HTML
โดยผลลัพธ์ที่เราได้คือ สี่เหลี่ยมที่เราสร้างจะเคลื่อนที่ไปทางแกน x 300px โดยนี่เป็นการสร้าง function พื้นฐานสำหรับการเลือกเป้าหมายที่เราจะสร้าง animation แล้วทำการย้ายตำแหน่งของ element ในแกน x โดยการใช้ translateX
ต่อไปเราจะทำการลองใช้ keyframe ของ anime.js มาทำการกำหนดรูปแบบการเคลื่อนไหวของ div element ที่เราสร้างขึ้น โดย keyframe ใน anime.js มีทั้งหมด 2 แบบ คือ animation keyframes กับ property keyframes ซึ่งทั้งสองมีข้อแตกต่างกันคือ property keyframes จะใช้ property object เป็น Array โดยในแต่ละ property จะมี keyframe เป็นของตัวเอง
โดยในบทความนี้จะใช้ animation keyframes โดยทำการแก้ไข js ดังนี้
โดยจากคำสั่งจะทำมี keyframe ทั้งหมด 4 keyframe และมีระยะเวลาในการแสดง animation ทั้งหมด 4 วินาที โดยใน keyframe แรกจะทำการขยับ div ไปทางแกน x 250 px รวมไปถึงทำการเปลี่ยน border radius จาก 0% ไปเป็น 50% และเปลี่ยนสีเป็นสีขาว หลังจากนั้น keyframe ที่ 2 จะทำการย้ายตำแหน่งไปทางแกน y อีก 300 px, keyframe ที่ 3 จะทำการย้ายแกน x ไปที่ตำแหน่งตอนเริ่มต้นรวมทั้งทำการขยายและย่อขนาดของ element ในแกน x ระหว่างเคลื่อนที่ และ keyframe ที่สี่จะย้ายตำแหน่งแกน y กลับไปจุดเริ่มต้นรวมทั้งเปลี่ยน border radius และสีให้กลับมาเป็นเหมือนเดิม โดยเมื่อจบ animation ก็จะทำการวนซ้ำภาพอีกครั้ง
Animation Library หรือ Tools อื่นที่น่าสนใจ
three.js
three.js เป็น JavaScript Library ที่มีจุดประสงค์ในการใช้สำหรับสร้างภาพ 3D animation สำหรับใช้งานบนเว็บไซต์ ที่สามารถใช้งานได้ง่าย และทำงานได้บนหลากหลาย Web Browser โดยทำงานผ่านการทำงานร่วมกันของ HTML5 Canvas, SVG หรือ WebGL โดยข้อมูลที่มากกว่านี้สามารถเข้าไปศึกษาเพิ่มได้จาก https://threejs.org/ โดยในหน้าเว็บก็จะมีตัวอย่างของเว็บไซต์ที่นำ Library ตัวนี้ไปใช้งานแสดงให้ดูด้วย
Lottie
เป็น open-source tool ของ Airbnb ที่ใช้สำหรับเปลี่ยน Adobe After Effect animation ให้กลายเป็นไฟล์ Json จาก plugin ของ Adobe After Effectที่มีชื่อว่า Bodymoving โดยที่เราสามารถนำไฟล์ Json นั้นไปเพิ่มลงในหน้าเว็บ หรือใน application บน Android และ IOS ได้
Reference
https://animejs.com/
https://threejs.org/
https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript#animate_with_javascript_and_the_web_animations_api
https://lottiefiles.com/what-is-lottie
https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e
