Add animations

This commit is contained in:
Jake Howard 2016-02-16 19:06:32 +00:00
parent d189461648
commit 44d004c598
2 changed files with 25 additions and 9 deletions

View file

@ -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() {

View file

@ -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]}>