如何将抖动动画添加到视图（react-native）？

Question

View当我的密码错误时，我想摇晃下面的内容。例如：

它应该是从位置 10 到位置 20 的 translateX 4 次 1 秒。然后应该停在原地 10。

放置 10（我的意思是 的 X 位置View）

startShake = () => {
   Animated.loop(
       Animated.sequence([
         Animated.timing(this.animatedValue, {toValue: 1, duration: 150, easing: Easing.linear, useNativeDriver: true}),
         Animated.timing(this.animatedValue, {toValue: -1, duration: 300, easing: Easing.linear, useNativeDriver: true}),
         Animated.timing(this.animatedValue, {toValue: 0, duration: 150, easing: Easing.linear, useNativeDriver: true}),
       ])
   ).start();
}

<Animated.View style={{transform: [{
    translateX: this.animatedValue.interpolate({
        inputRange: [0, 0],
        outputRange: [0, 0]
     })
  }]
}}>

</Animated.View>

Answer 1

谢谢大家的回答。

我刚刚解决了用以下代码编辑我的代码

  constructor(props) {
    super(props)
    this.shakeAnimation = new Animated.Value(0);
  }

 startShake = () => {
    Animated.sequence([
      Animated.timing(this.shakeAnimation, { toValue: 10, duration: 100, useNativeDriver: true }),
      Animated.timing(this.shakeAnimation, { toValue: -10, duration: 100, useNativeDriver: true }),
      Animated.timing(this.shakeAnimation, { toValue: 10, duration: 100, useNativeDriver: true }),
      Animated.timing(this.shakeAnimation, { toValue: 0, duration: 100, useNativeDriver: true })
    ]).start();
 }

 <Animated.View style={{ transform: [{translateX: this.shakeAnimation}] }}>  

 </Animated.View>