มาถึงวันนี้เราคงคุ้นเคยกับปุ่มไลค์แบบใหม่ของ Facebook (หรือชื่ออย่างเป็นทางการคือ Reaction) ซึ่งมีแอนิเมชันน่ารักแสดงเวลาเอาเมาส์ชี้และกดคลิก ล่าสุด Facebook เปิดซอร์สโค้ดของไลบรารีที่ใช้สร้างแอนิเมชันชุดนี้มาแล้ว ในชื่อว่า Keyframes

Keyframes เป็นไลบรารีที่ใช้แปลงไฟล์แอนิเมชันที่สร้างด้วย Adobe After Effects เพื่อเล่นบนเว็บและแอพ มันถูกสร้างมาเพื่อเรนเดอร์ปุ่ม Reaction ที่ปุ่มจะโตขึ้นเวลาเอาเมาส์ชี้ ภาพที่แสดงจึงต้องย่อ-ขยายได้แบบภาพไม่แตก, แอนิเมชันต้องเล่นที่เฟรมเรต 60 fps และดูลืนไหล, แต่ต้องมีไฟล์ขนาดเล็ก โหลดได้รวดเร็ว

Keyframes ไม่ได้ใช้ไฟล์ภาพปกติอย่าง PNG/Gif/WebP และไม่ได้ใช้ SVG บวกกับ CSS Animation เพราะมีปัญหาเรื่องเบราว์เซอร์บางตัวยังไม่ซัพพอร์ต แต่เลือกใช้วิธีแปลงไฟล์ After Effects เป็น metadata (JSON) แล้วเรนเดอร์ขึ้นมาใหม่ด้วย JavaScript แทน (บน iOS วาดด้วย Core Animation ส่วนบน Android วาดด้วย Paths/Metrices ในไลบรารีกราฟิกของระบบ)

คนที่สนใจสามารถดูซอร์สโค้ดได้จาก GitHub

ที่มา - Facebook Code