Last active
February 28, 2023 12:24
-
-
Save poberwong/fa3bbf4bbad0d2421bcbb1670bb37a4c to your computer and use it in GitHub Desktop.
a demo for loop animation in react-native
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Sample React Native App | |
* https://github.com/facebook/react-native | |
* @flow | |
*/ | |
import React, { Component } from 'react'; | |
import { | |
AppRegistry, | |
StyleSheet, | |
Animated, | |
Easing, | |
Text, | |
Image, | |
View | |
} from 'react-native'; | |
export default class Demo extends Component { | |
state = { | |
rotateAnim: new Animated.Value(0) | |
} | |
componentDidMount () { | |
this.startAnimation() | |
} | |
startAnimation () { | |
this.state.rotateAnim.setValue(0) | |
Animated.timing( | |
this.state.rotateAnim, | |
{ | |
toValue: 1, | |
duration: 800, | |
easing: Easing.linear | |
} | |
).start(() => { | |
this.startAnimation() | |
}) | |
} | |
render() { | |
return ( | |
<View style={styles.container}> | |
<Animated.Image | |
style={[styles.image, | |
{transform: [ | |
{rotate: this.state.rotateAnim.interpolate({ | |
inputRange: [0, 1], | |
outputRange: [ | |
'0deg', '360deg' | |
] | |
})} | |
]} | |
]} | |
source={require('./Funny.png')} /> | |
</View> | |
); | |
} | |
} | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
justifyContent: 'center', | |
alignItems: 'center', | |
backgroundColor: '#F5FCFF', | |
}, | |
image: { | |
width: 200, | |
height: 200, | |
borderRadius: 100, | |
backgroundColor: 'white' | |
} | |
}); | |
AppRegistry.registerComponent('Demo', () => Demo); |
Good.. Thanks.
Gracias!! it helped me
Why you are not using Animated.loop?
I'm having trouble using Animated when I leave the context of the app (goes to background) and come back to the app, it shows this error:
"Attempting to run JS driven animation on animated node that has been moved to "native" earlier by starting an animation with 'useNativeDriver: true'.
Anyone else having this problem?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you soo much! I just copied the code and it worked!