Bagaimanakah animasi berfungsi dalam React Native?

Question

Accepted Answer

React Native menyokong **animasi** melalui API **Animated** terbina dalam dan pustaka **Reanimated** yang popular. Animasi meningkatkan UX dengan gerakan dan peralihan yang lancar. Prestasi (menjalankan animasi pada thread natif) ialah pertimbangan utama. ## API Animated (terbina dalam) ```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 ... ``` API **Animated** menggunakan nilai animasi yang digunakan pada `Animated.View` dan sebagainya. `useNativeDriver: true` yang penting menjalankan animasi pada **thread natif** (lancar, tidak disekat oleh JS). ## Reanimated (disyorkan untuk animasi kompleks) ```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. ``` ## Mengapa prestasi penting di sini ```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. ``` ## Mengapa ia penting Memahami animasi dalam React Native adalah berharga kerana **animasi meningkatkan pengalaman pengguna** dengan gerakan dan peralihan lancar yang menjadikan aplikasi terasa licin, jadi ia merupakan pengetahuan praktikal yang berguna — dan pertimbangan prestasi adalah terutamanya penting dalam React Native. API **Animated** terbina dalam (menggunakan nilai animasi yang digunakan pada komponen Animated) menyediakan asas untuk animasi. Secara kritikal, memahami aspek prestasi — bahawa **animasi yang dipacu oleh thread JavaScript boleh tersekat-sekat (janky)** (jika thread JS sibuk) dan bahawa menjalankan animasi pada **thread natif/UI** (melalui `useNativeDriver: true` dalam Animated, atau melalui Reanimated) mengekalkannya lancar walaupun JS sibuk — ialah wawasan utama untuk animasi berprestasi dalam React Native, satu pertimbangan ketara memandangkan model threading JS/natif React Native. Memahami **Reanimated** (pustaka popular untuk animasi berprestasi, kompleks, dan dipacu gerak isyarat yang berjalan pada thread natif, menyokong worklets, fizik spring, dan gerak isyarat) adalah berharga kerana ia ialah **pilihan utama untuk animasi lanjutan** dalam React Native, lebih baik daripada API Animated asas untuk animasi interaktif kompleks. Memahami kedua-duanya — API Animated terbina dalam (dengan useNativeDriver) untuk animasi yang lebih ringkas dan Reanimated untuk yang kompleks, kedua-duanya menekankan menjalankan animasi secara natif untuk kelancaran — merangkumi kit alat animasi. Animasi yang licin meningkatkan UX dengan bermakna, dan menjadikannya lancar (dengan berjalan pada thread natif) ialah cabaran utama yang dihadirkan oleh seni bina React Native. Memandangkan animasi yang lancar meningkatkan UX dan prestasi animasi React Native bergantung secara kritikal pada menjalankan animasi pada thread natif (melalui useNativeDriver atau Reanimated), dan memandangkan memahami API Animated, Reanimated, dan terutamanya pertimbangan prestasi thread natif membolehkan pembinaan animasi yang lancar, memahami animasi dalam React Native adalah pengetahuan yang berharga dan relevan secara praktikal — berguna untuk meningkatkan UX dengan gerakan, di mana kebimbangan khusus React Native menjalankan animasi secara natif untuk kelancaran adalah terutamanya penting, satu kemahiran berharga untuk membina aplikasi React Native yang licin.