Animation hoạt động như thế nào trong React Native?

Question

Accepted Answer

React Native hỗ trợ **animation** thông qua API **Animated** tích hợp sẵn và thư viện **Reanimated** phổ biến. Animation nâng cao UX với chuyển động và chuyển cảnh mượt mà. Hiệu năng (chạy animation trên native thread) là một cân nhắc then chốt. ## API Animated (tích hợp sẵn) ```jsx import { Animated } from 'react-native'; const fadeAnim = useRef(new Animated.Value(0)).current; // một giá trị animated // animate nó (ví dụ fade in) Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: true, // chạy trên NATIVE thread (mượt — quan trọng!) }).start(); // áp dụng nó cho một component ... ``` API **Animated** dùng các giá trị animated áp dụng cho `Animated.View` v.v. `useNativeDriver: true` cực kỳ quan trọng chạy animation trên **native thread** (mượt, không bị JS chặn). ## Reanimated (khuyến nghị cho animation phức tạp) ```text REACT NATIVE REANIMATED → một thư viện phổ biến cho animation phức tạp, hiệu năng tốt: → chạy animation trên native/UI thread (mượt, tách khỏi JS thread) → hỗ trợ gesture (với react-native-gesture-handler), worklet, vật lý spring → tốt hơn cho animation phức tạp, tương tác, dựa trên gesture so với API Animated cơ bản → Lựa chọn hàng đầu cho animation nâng cao trong React Native. ``` ## Tại sao hiệu năng quan trọng ở đây ```text ⚠️ Animation được điều khiển bởi JS thread có thể GIẬT (JS thread bận / bị chặn) → → useNativeDriver (Animated) hoặc Reanimated chạy animation trên NATIVE/UI thread → mượt ngay cả khi JS bận → Chạy animation native (không trên JS thread) là CHÌA KHÓA cho animation mượt trong RN. ``` ## Tại sao điều này quan trọng Hiểu animation trong React Native có giá trị vì **animation nâng cao trải nghiệm người dùng** với chuyển động và chuyển cảnh mượt mà làm cho app cảm thấy chỉn chu, nên đây là kiến thức thực hành hữu ích — và các cân nhắc về hiệu năng đặc biệt quan trọng trong React Native. API **Animated** tích hợp sẵn (dùng các giá trị animated áp dụng cho component Animated) cung cấp nền tảng cho animation. Cực kỳ quan trọng, hiểu khía cạnh hiệu năng — rằng **animation được điều khiển bởi JavaScript thread có thể giật** (nếu JS thread bận) và rằng chạy animation trên **native/UI thread** (qua `useNativeDriver: true` trong Animated, hoặc qua Reanimated) giữ chúng mượt ngay cả khi JS bận — là điểm mấu chốt cho animation hiệu năng tốt trong React Native, một cân nhắc đáng chú ý do mô hình threading JS/native của React Native. Hiểu **Reanimated** (thư viện phổ biến cho animation phức tạp, hiệu năng tốt, dựa trên gesture chạy trên native thread, hỗ trợ worklet, vật lý spring, và gesture) có giá trị vì nó là **lựa chọn hàng đầu cho animation nâng cao** trong React Native, tốt hơn API Animated cơ bản cho animation phức tạp, tương tác. Hiểu cả hai — API Animated tích hợp sẵn (với useNativeDriver) cho animation đơn giản hơn và Reanimated cho animation phức tạp, cả hai đều nhấn mạnh chạy animation native để mượt mà — bao quát bộ công cụ animation. Animation chỉn chu cải thiện UX một cách có ý nghĩa, và làm chúng mượt (bằng cách chạy trên native thread) là thách thức then chốt mà kiến trúc của React Native đặt ra. Vì animation mượt nâng cao UX và hiệu năng animation của React Native phụ thuộc cốt yếu vào việc chạy animation trên native thread (qua useNativeDriver hoặc Reanimated), và vì hiểu API Animated, Reanimated, và đặc biệt cân nhắc hiệu năng native-thread cho phép xây dựng animation mượt, hiểu animation trong React Native là kiến thức có giá trị, liên quan thực tiễn — hữu ích để nâng cao UX với chuyển động, nơi mối quan tâm đặc thù của React Native là chạy animation native để mượt mà đặc biệt quan trọng, một kỹ năng có giá trị để xây dựng app React Native chỉn chu.