สร้าง Tactile UX ด้วย Lottie - เมื่อตัวเลขและแอนิเมชันที่ตั้งใจสำคัญกว่าฟิสิกส์เอนจิน

เมื่อทีมงานของ Isadora Agency ต้องการสร้าง Stress Release - ของเล่นคลายเครียดดิจิทัลที่ให้ผู้ใช้บีบ ต่อย และบิดตัวละครอนิเมชัน ทีมออกแบบต้องการความรู้สึก "สัมผัสได้" และการตอบสนองที่ตั้งใจไว้ล่วงหน้า ดังนั้นแทนที่จะใช้ physics engine อย่าง Matter.js หรือ Cannon.js ทีมจึงเลือกใช้ Lottie ร่วมกับการคำนวณบน DOM เพื่อให้ได้การควบคุมเฟรมแอนิเมชันอย่างแม่นยำ

ความต้องการด้านการออกแบบ - การเคลื่อนไหวที่ตั้งใจไว้

ข้อกำหนดสำคัญคือการควบคุมแบบ deterministic เพราะไฟล์ Lottie .json ถูกสร้างขึ้นโดยแอนิเมเตอร์เป็นเฟรมต่อเฟรม ตัวอย่างเช่นปฏิกิริยา "mega squeeze" ต้องการการสะสมแบบแม่นยำ 181-frame ก่อนจะปล่อยผลลัพธ์ออกมา การจำลองพฤติกรรมด้วยฟิสิกส์อาจให้การเคลื่อนไหวที่สมจริงแต่ไม่สอดคล้องกับ keyframe ที่ออกแบบไว้ ดังนั้นทีมจึงตัดสินใจใช้การควบคุมสถานะแบบโปรแกรมมาติคผ่าน API ของ Lottie เพื่อให้โค้ดเป็นทริกเกอร์ที่แม่นยำสำหรับ timeline ของแอนิเมชัน

แมป DOM ไปยังสถานะ Lottie ด้วยคณิตศาสตร์ระยะทาง

การตอบสนองแบบสัมผัสเริ่มจากการแปลงตำแหน่งคลิกของผู้ใช้จากพิกัดหน้าเพจเป็นพิกัดภายในตัวละคร จากนั้นคำนวณระยะทางแบบเส้นตรงด้วยทฤษฎีบทพีทาโกรัส ผลลัพธ์ตัวเดียวนี้ขับเคลื่อนทั้งคะแนน ความเข้มของฟีดแบ็ก และตำแหน่งของอนิเมชันระเบิด - ทำให้เกิดระบบวงวงสมาธิคล้ายเป้าธนู โดย hitbox ถูกนิยามเป็นวงกลมรอบจุดศูนย์กลางของตัวละครไม่ขึ้นกับความซับซ้อนของ SVG ในไฟล์ Lottie

การจัดการปฏิสัมพันธ์และการเล่าเรื่อง

เพราะแอนิเมชันถูกเรนเดอร์ผ่าน Lottie runtime เป็น SVG และจัดการผ่าน DOM จึงใช้ตัวฟังเหตุการณ์พื้นฐานของเบราว์เซอร์ได้โดยตรง ไม่ต้องเพิ่มเลเยอร์การยิงเรย์หรือแม็ปพิกัดซับซ้อน เมื่อคลิกเกิดขึ้น โค้ดจะเรียกเล่นช่วงเฟรมที่ตรงกับสถานะปัจจุบันโดยใช้ playSegments() เพื่อข้ามไปยัง segment ที่เหมาะสมตามลำดับการเล่น เมื่อแต่ละ segment จบ การควบคุมจะกลับไปยัง idle loop หรือรอบการสะสมของ mega squeeze ตามที่ออกแบบไว้

ลดภาระบนมือถือ - กลยุทธ์จัดการไฟล์และหน่วยความจำ

สถาปัตยกรรมนี้ให้คอนโทรลเชิงศิลป์เต็มที่ แต่ต้องแลกกับไฟล์ Lottie ที่มีขนาดใหญ่ ในโปรเจคมีตัวละครทั้งหมด 21 ตัว และอนิเมชันระเบิดหลายแบบ ทีมใช้วิธีการปรับแต่งเชิงรุกหลายอย่าง

• ตรวจสอบการเชื่อมต่อ - วัดเวลาโหลดเริ่มต้นด้วย performance.now() และถือว่าเชื่อมต่อล่าช้าถ้าผ่าน 5 วินาที
• โหลดแบบเป็นลำดับ - ไม่เริ่มต้นทุกตัวพร้อมกัน แต่โหลดทีละคู่โดยใช้ await เพื่อลด burst request
• จัดการหน่วยความจำเชิงรุก - ทำลายและสร้างอนิเมชันระเบิดใหม่ระหว่างการใช้งาน เพื่อลด idle memory footprint
• ลดคุณภาพแบบไดนามิก - เรียกใช้การลดคุณภาพผ่าน API ทันทีหลังโหลดตัวละครแต่ละตัว โดยปรับระดับตามบทบาทของตัวละคร

การรองรับ responsive เกิดขึ้นด้วย CSS custom properties - คำนวณค่าตัวแปรใหม่เมื่อมีการเปลี่ยนขนาด ทำให้ Lottie SVG ปรับสเกลภายในคอนเทนเนอร์โดยไม่เสียสถานะ

สรุปคือ เมื่อโฟกัสของงานคือการส่งมอบการเคลื่อนไหวที่ตั้งใจไว้และควบคุมได้แบบเฟรมต่อเฟรม การเลือกใช้ Lottie ร่วมกับการคำนวณบน DOM เป็นทางเลือกที่เหมาะสม โค้ดทำหน้าที่คำนวณและทริกเกอร์ ส่วนแอนิเมเตอร์กำหนดจังหวะและความรู้สึก สำหรับคนทำงาน front-end ในไทย เทคนิคการแมปพิกัด การจัดการโหลดแบบเป็นลำดับ และการบริหารหน่วยความจำเป็นทักษะที่นำไปใช้ได้ทันทีเมื่อต้องทำงานกับแอนิเมชันขนาดใหญ่

ที่มา: Smashing Magazine - เรียบเรียงและสรุปเป็นภาษาไทยโดยทีมงาน IT Genius