React Native - 從左側到屏幕中心的動畫文本

Question

如何使用反應原生動畫 API 將此文本從左移到中心？

const animate = () => {
   // TODO - Animate text from 27.5 left, to center of screen
}

return (
   <View style={styles.header}>
      <Animated.Text style={{ marginLeft: 27.5 }}>
         Header
      </Animated.Text>
   </View>
);

Answer 1

我強烈建議您閱讀 React Native 的官方文檔： https://reactnative.dev/docs/animated

您可以從創建動畫值的引用開始，如下所示：

const moveAnimation = useRef(new Animated.Value(0)).current;

並將其傳遞給您的動畫組件：

...
 <Animated.Text style={[styles.text, {marginLeft: moveAnimation}]}>
...

最后，我們需要創建您的 animation：

// Note that i used Dimensions from React-Native and subtracted 50 from it
// because i have a padding in my View component

const animate = () => {
    Animated.timing(moveAnimation, {
      toValue: (Dimensions.get('window').width/2)-50,
      duration: 200
    }).start();
  }

現在，您可以簡單地調用我們的動畫 function 來觸發它。

我寫了這個小吃，所以你可以看到它在運行： https://snack.expo.io/@filipemelo032/animation