การใช้งาน Lottie animations ร่วมกับ React

Lottie Animation เป็นไฟล์ภาพอนิเมชั่นที่เบา เร็ว และมีภาพเคลื่อนไหวที่มีคุณภาพสูง คือ เร็วกว่า .gif หรือ png ที่เรียงซ้อนกัน หรือแม้กระทั่งวีดีโอที่เป็นไฟล์ใหญ่โดยปัจจุบันเว็บต้องการการโหลดเว็บที่เร็วแต่ยังต้องมีลูกเล่น การใช้ Lottie Animation เพื่อตอบโจทย์ในส่วนนี้

ในบทความนี้จะไม่พูดถึงการสร้างไฟล์ Lottie Animation แต่จะเป็นการพูดถึงการใช้งานไฟล์ Lottie ร่วมกับ React ซึ่งแน่นอนจะต้องมีการสร้างไฟล์ Lottie ที่เป็นไฟล์นามสกุล .json ขึ้นมาแล้ว ซึ่งทาง Lottie Animation จะมีตัวช่วยในการสร้างแบบออนไลน์อย่าง Lottie Editor แทนการสร้างในโปรแกรม Adobe After Effect

สร้างไฟล์ Lottie Animation ด้วย Lottie Editor

ต่อมาหลังจากที่เราได้ทำการสร้างไฟล์ .json ขึ้นมาแล้ว เนื้อหาในไฟล์จะอยู่ในรูปแบบของ json ซึ่งสิ่งที่สำคัญอีกส่วนหนึ่งในการใช้งานเพื่อ Render ไฟล์ .json ของเราให้อยู่ในรูปแบบ Animation บนหน้าเว็บนั้นในส่วนนี้เราจะใช้ Libraly ที่ชื่อว่า react-lottie

เริ่มต้นโปรเจค React ด้วย create-react-app ในที่นี้จะยกตัวอย่าง app ว่า app-use-lottie

หากผู้อ่านไม่เคยใช้งาน create-react-app สามารถอ่านบทความก่อนหน้านี้ได้ที่
เริ่มต้นโปรเจคด้วย React Typescript + Tailwind Css

ทำการติดตั้ง react-lottie ด้วยคำสั่ง

npm i --save-dev @types/react-lottie

ทำการ Import Lottie จาก react-lottie และไฟล์ .json ของเรา ในที่นี้คือ arrow-down.json

import Lottie from "react-lottie";
import LottieExample from "./arrow-down.json";

เพิ่มส่วนชองการ Render ไฟล์ lottie

• options คือ ส่วนของการตั้งค่าการทำงานต่างๆขแง Lottie
  • loop รับค่าเป็น Boolean ว่าต้องการให้ทำการวนซ้ำการทำงานหรือไม่
  • autoplay รับค่าเป็น Boolean ว่าต้องการให้ทำการเริ่มต้นการทำงานแบบอัตโนมัติหรือไม่
  • animationData ไฟล์ .json ที่ได้ทำการ Import เข้ามา
• height ส่วนสูงของไฟล์ Lottie
• width ความกว้างของไฟล์ Lottie

<Lottie
  options={{
    loop: true,
    autoplay: true,
    animationData: LottieExample,
  }}
  height={400}
  width={400}
/>

หากไม่เกิดข้อผิดพาดขึ้นมาจะปรากฏ Animation ที่ได้จากการ Render ไฟล์ Lottie Animation ตามที่เราสร้างขึ้นมา