I am trying to create a shaking image animation in React Native when a TouchableOpacity is pressed.
So far, I have implemented an animated image with the following code:
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()
}
This is where I call handleAnimation() within a TouchableOpacity:
<TouchableOpacity onPress={this.handleAnimation}>
<Text style={{fontSize: 24, fontWeight: 'bold'}}>Play</Text>
</TouchableOpacity>
And here is the code for animating the image:
<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]
})
}
]
}}
/>
The current code successfully creates an animation when the TouchableOpacity is pressed. However, I am unsure how to implement a shaking effect on the image when the TouchableOpacity is pressed.