Add animations
This commit is contained in:
parent
d189461648
commit
44d004c598
2 changed files with 25 additions and 9 deletions
|
@ -42,11 +42,6 @@ export default class Home extends React.Component {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
getProjects().then(function (data) {
|
||||
this.setState({
|
||||
projects: data
|
||||
});
|
||||
}.bind(this)).catch(console.log);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
@ -19,7 +19,8 @@ const {
|
|||
BackAndroid,
|
||||
TouchableWithoutFeedback,
|
||||
Alert,
|
||||
Image
|
||||
Image,
|
||||
Animated
|
||||
} = React;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
@ -59,7 +60,7 @@ const styles = StyleSheet.create({
|
|||
margin: 5
|
||||
},
|
||||
heading: {
|
||||
fontSize: 15,
|
||||
fontSize: 14,
|
||||
},
|
||||
helpText: {
|
||||
fontSize: 10,
|
||||
|
@ -83,6 +84,19 @@ export default class Login extends React.Component {
|
|||
token: '',
|
||||
showTokenHelp: false
|
||||
};
|
||||
this.animate = new Animated.Value(2);
|
||||
this.viewAnimate = {
|
||||
transform: [ // Array order matters
|
||||
{scale: this.animate.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 0.4],
|
||||
})},
|
||||
{translateY: this.animate.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, -100],
|
||||
})},
|
||||
]
|
||||
};
|
||||
this.validate = this.validate.bind(this);
|
||||
this.textChanged = this.textChanged.bind(this);
|
||||
this.showTokenHelp = this.showTokenHelp.bind(this);
|
||||
|
@ -152,13 +166,20 @@ export default class Login extends React.Component {
|
|||
BackAndroid.addEventListener('hardwareBackPress', () => { return true; }); // Disable back button
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
Animated.spring(this.animate, {
|
||||
toValue: 0,
|
||||
tension: 30,
|
||||
}).start();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
|
||||
<View style={styles.contentWrapper}>
|
||||
<Image
|
||||
style={styles.icon}
|
||||
<Animated.Image
|
||||
style={[styles.icon, this.viewAnimate]}
|
||||
source={require('../../img/circle-ci-logo@light.png')}
|
||||
resizeMode="contain"/>
|
||||
<Text style={[styles.heading, styles.text]}>
|
||||
|
|
Reference in a new issue