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() { componentDidMount() {
getProjects().then(function (data) {
this.setState({
projects: data
});
}.bind(this)).catch(console.log);
} }
render() { render() {

View file

@ -19,7 +19,8 @@ const {
BackAndroid, BackAndroid,
TouchableWithoutFeedback, TouchableWithoutFeedback,
Alert, Alert,
Image Image,
Animated
} = React; } = React;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -59,7 +60,7 @@ const styles = StyleSheet.create({
margin: 5 margin: 5
}, },
heading: { heading: {
fontSize: 15, fontSize: 14,
}, },
helpText: { helpText: {
fontSize: 10, fontSize: 10,
@ -83,6 +84,19 @@ export default class Login extends React.Component {
token: '', token: '',
showTokenHelp: false 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.validate = this.validate.bind(this);
this.textChanged = this.textChanged.bind(this); this.textChanged = this.textChanged.bind(this);
this.showTokenHelp = this.showTokenHelp.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 BackAndroid.addEventListener('hardwareBackPress', () => { return true; }); // Disable back button
} }
componentDidMount() {
Animated.spring(this.animate, {
toValue: 0,
tension: 30,
}).start();
}
render() { render() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}> <ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
<View style={styles.contentWrapper}> <View style={styles.contentWrapper}>
<Image <Animated.Image
style={styles.icon} style={[styles.icon, this.viewAnimate]}
source={require('../../img/circle-ci-logo@light.png')} source={require('../../img/circle-ci-logo@light.png')}
resizeMode="contain"/> resizeMode="contain"/>
<Text style={[styles.heading, styles.text]}> <Text style={[styles.heading, styles.text]}>