มาทำ Animation บน React Native กันดีกว่า
วันนี้ครับผมจะช่วนทุกคนมาเพิ่มความน่าสนใจให้กับ App ของเรากัน โดยการเพิ่ม Animation เพื่อเป็นลูกเล่นเล็กๆน้อยๆ กันนะครับ ซึ่งผมจะแนะนำให้รู้จัก Lottie library จาก Airbnb ที่สามารถทำการ render animations มาอยู่ใน App ของเรานั้นเองครับ (ตัวอย่างอยู่ด้านล่าง)
ก่อนอื่นเลยครับเราต้องเริ่ม Init project ขึ้นาก่อนผมขอใช้เป็น React Native ละกันนะครับ โดยเริ่มจากเปิด terminal มาเเล้ว พิม command ตามนี้ก่อนเลยครับ
npm install -g expo-cliexpo init lottie-projectcd lottie-projectnpm start
หลังจากเรา npm start เเล้วสิ่งที่ได้ก็จะได้ หน้าต่างของ Expo ออกมานะครับ เเลว้เราก็ทำการ Scan QR code หรือว่าใครอยากจะใช้เป็น Simulator ก็ได้ตามสะดวกเลย เเต่สิ่งที่จะออกมาให้เราเห็นเหมือนกันนั้นก็คือหน้าตาของ App เริ่มต้น (รูปที่ 2 ) ตามภาพด้านล่างเลย
หลังจากนั้นก็ให้เราเข้าไปที่ workspace ของเราเเล้วทำการลง
npm i --save lottie-react-nativeหรือyarn add lottie-react-native
เพื่อทำการลงเจ้า lottie สำหรับ react-native กันนะครับ พอลงเส็จเเล้วก็เข้าไปที่ไฟล์ App.js เลยและทำการ import lottie-react-native และเพิ่ม component LottieView เข้าไปตามนี้เลยครับ
จะเห็นว่าบรรทัดที่ 6 ผมได้ทำการ require JSON ใน assets มานั้เป็น animation ที่ผมโหลดว่าไว้ใน assets folder นั้นเองครับ ซึ่งสามารถหา Animation สวยๆได้จากลิ๊งด้านล่างเลยครับ
ที่นี้ลอง Run App ใหม่อีกทีสิ่งที่ได้ก็จะได้ Animation อยู่บน App ของเราเเล้ว
สรุป
เจ้า Lottie ก็คือ library ที่เอาไว้จัดการกับ Animation ซึ่งเราสามารถใช้ได้กับทั้ง IOS, Android หรือ React Native ซึ่งติดตั้งไม่ยาก ช่วยให้เราทำ Animation ในเวลาอันสั้น ก็หวังว่าบทความนี้จะเป็น Tips เล็กๆน้อยๆสำหรับคนที่เขียน Mobile App กันนะครับ สำหรับคนที่สนใจอยากศึกษาเพิ่มเติมเดี๋ยวผมจะแป๊ะลิ๊งเอาไว้ด้านล่างนะครับ สำหรับ blog นี้ก็ขอจบลงเพียงเท่านี้ สำหรับวันนี้สวัสดีครับบบบบบ
