如何将抖动动画添加到视图(reactnative)

发布于08月28日

当我的密码错误时，我想摇动View以下的数字.

它应该是从第10位到第20位的translateX，持续4次1秒.

位置10(我指的是View的X位置)

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>

推荐答案

谢谢你的回答.

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

  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>