แอนิเมชันใน React Native ทำงานอย่างไร?

Question

Accepted Answer

React Native รองรับ **แอนิเมชัน** ผ่าน **Animated** API ที่มีมาในตัว และไลบรารียอดนิยม **Reanimated** แอนิเมชันช่วยยกระดับ UX ด้วยการเคลื่อนไหวและทรานซิชันที่ลื่นไหล ประสิทธิภาพ (การรันแอนิเมชันบน native thread) เป็นข้อพิจารณาสำคัญ ## Animated API (มีมาในตัว) ```jsx import { Animated } from 'react-native'; const fadeAnim = useRef(new Animated.Value(0)).current; // an animated value // animate it (e.g. fade in) Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: true, // run on the NATIVE thread (smooth — important!) }).start(); // apply it to a component ... ``` **Animated** API ใช้ค่า animated value ที่นำไปใช้กับ `Animated.View` เป็นต้น ค่า `useNativeDriver: true` ที่สำคัญจะรันแอนิเมชันบน **native thread** (ลื่นไหล ไม่ถูกบล็อกโดย JS) ## Reanimated (แนะนำสำหรับแอนิเมชันที่ซับซ้อน) ```text REACT NATIVE REANIMATED → a popular library for performant, complex animations: → runs animations on the native/UI thread (smooth, off the JS thread) → supports gestures (with react-native-gesture-handler), worklets, spring physics → better for complex, interactive, gesture-driven animations than the basic Animated API → The go-to for advanced animations in React Native. ``` ## ทำไมประสิทธิภาพจึงสำคัญที่นี่ ```text ⚠️ Animations driven by the JS thread can be JANKY (the JS thread is busy / blocked) → → useNativeDriver (Animated) or Reanimated run animations on the NATIVE/UI thread → smooth even if JS is busy → Running animations natively (not on the JS thread) is KEY to smooth animations in RN. ``` ## ทำไมจึงสำคัญ การเข้าใจแอนิเมชันใน React Native มีคุณค่าเพราะ **แอนิเมชันช่วยยกระดับประสบการณ์ผู้ใช้** ด้วยการเคลื่อนไหวและทรานซิชันที่ลื่นไหลซึ่งทำให้แอปดูสมบูรณ์แบบ จึงเป็นความรู้เชิงปฏิบัติที่มีประโยชน์ — และข้อพิจารณาด้านประสิทธิภาพมีความสำคัญเป็นพิเศษใน React Native **Animated** API ที่มีมาในตัว (ใช้ค่า animated value ที่นำไปใช้กับ Animated component) เป็นรากฐานของแอนิเมชัน ที่สำคัญยิ่ง การเข้าใจแง่มุมด้านประสิทธิภาพ — ว่า **แอนิเมชันที่ขับเคลื่อนโดย JavaScript thread อาจกระตุก** (หาก JS thread ยุ่ง) และการรันแอนิเมชันบน **native/UI thread** (ผ่าน `useNativeDriver: true` ใน Animated หรือผ่าน Reanimated) จะทำให้แอนิเมชันลื่นไหลแม้ขณะ JS ยุ่ง — เป็นข้อมูลเชิงลึกหลักสำหรับแอนิเมชันที่มีประสิทธิภาพใน React Native ซึ่งเป็นข้อพิจารณาที่โดดเด่นเมื่อพิจารณาโมเดลการแบ่ง thread แบบ JS/native ของ React Native การเข้าใจ **Reanimated** (ไลบรารียอดนิยมสำหรับแอนิเมชันที่มีประสิทธิภาพ ซับซ้อน และขับเคลื่อนด้วย gesture ที่รันบน native thread รองรับ worklet, spring physics และ gesture) มีคุณค่าเพราะเป็น **ตัวเลือกหลักสำหรับแอนิเมชันขั้นสูง** ใน React Native ดีกว่า Animated API พื้นฐานสำหรับแอนิเมชันแบบโต้ตอบที่ซับซ้อน การเข้าใจทั้งสองอย่าง — Animated API ที่มีมาในตัว (พร้อม useNativeDriver) สำหรับแอนิเมชันที่ง่ายกว่า และ Reanimated สำหรับแอนิเมชันที่ซับซ้อน โดยทั้งคู่เน้นการรันแอนิเมชันแบบ native เพื่อความลื่นไหล — ครอบคลุมชุดเครื่องมือแอนิเมชัน แอนิเมชันที่สมบูรณ์แบบช่วยปรับปรุง UX อย่างมีนัยสำคัญ และการทำให้ลื่นไหล (โดยรันบน native thread) เป็นความท้าทายหลักที่สถาปัตยกรรมของ React Native นำเสนอ เนื่องจากแอนิเมชันที่ลื่นไหลช่วยยกระดับ UX และประสิทธิภาพแอนิเมชันของ React Native ขึ้นอยู่กับการรันแอนิเมชันบน native thread อย่างยิ่ง (ผ่าน useNativeDriver หรือ Reanimated) และเนื่องจากการเข้าใจ Animated API, Reanimated และโดยเฉพาะอย่างยิ่งข้อพิจารณาด้านประสิทธิภาพบน native thread ช่วยให้สร้างแอนิเมชันที่ลื่นไหลได้ การเข้าใจแอนิเมชันใน React Native จึงเป็นความรู้ที่มีคุณค่าและเกี่ยวข้องกับการปฏิบัติ — มีประโยชน์ในการยกระดับ UX ด้วยการเคลื่อนไหว ซึ่งข้อกังวลเฉพาะของ React Native ในการรันแอนิเมชันแบบ native เพื่อความลื่นไหลมีความสำคัญเป็นพิเศษ เป็นทักษะที่มีคุณค่าสำหรับการสร้างแอป React Native ที่สมบูรณ์แบบ