react-native 的 Animated API提供了一種聲明式的方式來創建平滑的動畫效果。它允許你編寫動畫邏輯，并將動畫值直接綁定到組件的樣式或布局屬性上。
react-native 的 Animated 庫通過以下方式工作：
- 創建動畫值：首先，你需要使用 Animated API 創建一個或多個動畫值。這些值可以是數字（Animated.Value）、數組（Animated.ValueXY，用于 2D 動畫）或顏色（Animated.ValueColors）。
- 定義動畫：接下來，你可以定義動畫如何隨時間變化。這通常是通過使用 Animated 提供的各種動畫類型（如 Animated.timing、Animated.spring 等）來完成的。
- 綁定動畫值：將動畫值綁定到組件的樣式或布局屬性上。這通常是通過使用 Animated.style 或直接在樣式對象中使用 Animated 值來完成的。
- 啟動動畫：最后，通過調用動畫實例的 start() 方法來啟動動畫。
代碼示例：
import React, { useRef, useEffect } from 'react';
import { View, Animated, StyleSheet } from 'react-native'; const AnimatedExample = () => { // 創建一個動畫值，初始位置為 0 const position = useRef(new Animated.Value(0)).current; useEffect(() => { // 定義動畫 const animation = Animated.timing(position, { toValue: 200, // 動畫結束時的值 duration: 1000, // 動畫持續時間（毫秒） useNativeDriver: true, // 使用原生驅動以提高性能（在可能的情況下） }); // 啟動動畫 animation.start(); }, []); // 使用動畫值來設置組件的樣式 const styles = StyleSheet.create({ container: { width: 50, height: 50, backgroundColor: 'blue', position: 'absolute', // 絕對定位以便看到移動效果 }, animated: { transform: [ { translateX: position, // 將動畫值綁定到 translateX 屬性上 }, ], }, }); return ( <View style={styles.container}> <Animated.View style={[styles.container, styles.animated]} /> </View> );
}; export default AnimatedExample;
以下是一些常見的使用場景：
- UI 動畫：當你想要為用戶界面添加動態效果時，比如移動、縮放、旋轉或更改顏色等，你可以使用 Animated 庫。例如，在按鈕點擊時改變其大小或顏色，或者在列表項滾動時改變其透明度。
- 過渡和導航：在導航庫（如 react-navigation）中，Animated 庫經常被用來創建頁面之間的過渡動畫。例如，當你從一個頁面導航到另一個頁面時，可以創建一個滑動、淡入淡出或自定義的過渡效果。
- 數據可視化：對于需要展示動態數據變化的組件，如圖表或儀表板，Animated 庫可以用來創建流暢的動畫效果。
- 自定義組件：如果你正在開發一個自定義的 React Native 組件，并且該組件需要動畫效果，那么 Animated 庫將是一個很好的選擇。你可以將動畫值綁定到組件的樣式或屬性上，以實現所需的動畫效果。
)
)
