I've made some simple animation using Animated
from react-native
The animation works as expected after the first onPress, but I can't figure out how to reset it, to make it work for the next taps.
constructor(props) {
super(props);
this.spinValue = new Animated.Value(0);
// Second interpolate beginning and end values (in this case 0 and 1)
this.spin = this.spinValue.interpolate({
inputRange: [0, 1, 2, 3, 4],
outputRange: ['0deg', '4deg', '0deg', '-4deg', '0deg']
});
}
handlePress() {
// First set up animation
Animated.timing(
this.spinValue,
{
toValue: 4,
duration: 300,
}
).start();
}
And in render
<TouchableWithoutFeedback onPress={() => { this.handlePress(); }} >
<Animated.Image
source={someImg}
style={{ height: undefined, width: undefined, flex: 1, transform: [{ rotate: this.spin }, { perspective: 1000 }] }}
resizeMode={'contain'}
resizeMethod="resize"
/>
</TouchableWithoutFeedback>
Any suggestions? Thanks
If an animation is in process of being animated and, for any particular reason, you need to stop it, you can call stopAnimation . The stopAnimation call also takes a callback with the value that the animation was stopped on. this. _animatedValue = new Animated.
The updated answer should be: . start(({finished}) => { if (finished) { console. log('animation ended!) } })
diffClamp() It uses the difference between the last value so even if the value is far from the bounds it will start changing when the value starts getting closer again. ( value = clamp(value + diff, min, max) ).
In order to create looping animations in react native, we should use Animated. loop() method. Wrap your Animations within Animated. loop() and the animations will act as a loop.
You can use this.spinValue.setValue(0)
to reset it. You can add it at the beginning of handlePress
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With