如何在 React Native 中制作抖动图像动画？

Question

当我按下 TouchableOpacity 时，我想在 React Native 中制作一个抖动的图像动画。

到目前为止，我已经用下面的代码制作了一个动画图像：

const backgroundImage = require('./components/images/baby-sleep.jpg')

class App extends Component {

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

    handleAnimation = () => {
        Animated.timing(this.animatedValue, {
            toValue: 1,
            duration: 1000,
            easing: Easing.ease
        }).start()

    }

这是我在 TouchableOpacity 中调用 handleAnimation() 的代码：

<TouchableOpacity onPress={this.handleAnimation}>
   <Text style={{fontSize: 24, fontWeight: 'bold'}}>Play</Text>
</TouchableOpacity>

这是我制作动画图像的代码：

<Animated.Image
    source={backgroundImage}
    resizeMode='contain'
    style={{

    transform: [
        {
            translateX: this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 120]
            })
        },
        {
            translateY: this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 230]
            })
        },
        {
            scaleX: this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [1, 15]
            })
        },
        {
            scaleY: this.animatedValue.interpolate({
            inputRange: [0, 9],
            outputRange: [1, 150.5]
            })
        }
    ]
    }}
/>

当我按下 TouchableOpacity 时，该代码制作了动画，但现在我真的不知道当我按下 TouchableOpacity 时如何使图像抖动动画

Answer 1

你其实很接近。我将在下面提供单个摆动旋转的完整示例，然后您可以根据需要添加其他动画：

const backgroundImage = require('./components/images/baby-sleep.jpg')

class App extends Component {

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

  handleAnimation = () => {
    // A loop is needed for continuous animation
    Animated.loop(
      // Animation consists of a sequence of steps
      Animated.sequence([
        // start rotation in one direction (only half the time is needed)
        Animated.timing(this.animatedValue, {toValue: 1.0, duration: 150, easing: Easing.linear, useNativeDriver: true}),
        // rotate in other direction, to minimum value (= twice the duration of above)
        Animated.timing(this.animatedValue, {toValue: -1.0, duration: 300, easing: Easing.linear, useNativeDriver: true}),
        // return to begin position
        Animated.timing(this.animatedValue, {toValue: 0.0, duration: 150, easing: Easing.linear, useNativeDriver: true})
      ])
    ).start(); 
  }
}

然后将这个旋转添加到 Image 组件中：

<Animated.Image
  source={backgroundImage}
  resizeMode='contain'
  style={{
    transform: [{
      rotate: this.animatedValue.interpolate({
        inputRange: [-1, 1],
        outputRange: ['-0.1rad', '0.1rad']
      })
    }]
  }}
/>