Animated Objects

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  Image,
} from 'react-native';

const styles = StyleSheet.create({
    flexBox: {flex: 1},
    adjustLeftCenter: {justifyContent: 'center', alignItems: 'flex-start'},
    adjustCenter: {justifyContent: 'center', alignItems: 'center'},
    backDrop: {backgroundColor: '#E6EE9C'},
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

class OpenGL extends Component {

    constructor(){
        super();
        this.animatedValue = new Animated.Value(0);
    }

    componentDidMount(){
        this.anime();
    }

    anime(){
        this.animatedValue.setValue(0)
        Animated.timing(
            this.animatedValue,
            {
                toValue: 1, duration: 2000, easing: Easing.linear,
            }).start(() => this.anime());
    }

    render(){
        const marginLeft = this.animatedValue.interpolate({
            inputRange: [0, 1], outputRange: [0, 300]
        }),
        opacity = this.animatedValue.interpolate({
            inputRange: [0, 0.5, 1], outputRange: [0, 1, 0]
        }),
        movingMargin = this.animatedValue.interpolate({
            inputRange: [0, 0.5, 1], outputRange: [0, 300, 0]
        }),
        textSize = this.animatedValue.interpolate({
            inputRange: [0, 0.5, 1], outputRange: [18, 32, 18]
        }),
        rotateX = this.animatedValue.interpolate({
            inputRange: [0, 0.5, 1], outputRange: ['0deg', '180deg', '0deg']
        });

        return(
        <View style={[styles.flexBox, styles.adjustLeftCenter, styles.backDrop]}>
            <Animated.View style={{ marginLeft, height: 30, width: 40, backgroundColor: 'red'}} />
            <Animated.View style={{ opacity, marginTop: 10, height: 30, width: 40, backgroundColor: 'blue'}} />
            <Animated.View style={{ marginLeft: movingMargin, marginTop: 10, height: 30, width: 40, backgroundColor: 'orange'}} />
            <Animated.Text style={{ fontSize: textSize, marginTop: 10, color: 'green'}} >
                Animated Text!
            </Animated.Text>
            <Animated.View style={{ transform: [{rotateX}], marginTop: 50, height: 70, width: 70, backgroundColor: 'black'}}>
                <Text style={{color: 'white'}}>Hello from TransformX</Text>
            </Animated.View>
        </View>
        );
    }
}

export default OpenGL;

Animated Shuriken

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Animated,
  Easing
} from 'react-native';

const styles = StyleSheet.create({
    flexBox:{flex: 1},
    adjustCenter: {justifyContent: 'center', alignItems: 'center',},
    backdrop: {backgroundColor: '#E6EE9C',},
      welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

class OpenGL extends Component{

    constructor(){
        super();
        this.spinValue = new Animated.Value(0);
    }

    componentDidMount(){
        this.spin();
    }

    spin(){
        this.spinValue.setValue(0)
        Animated.timing(
            this.spinValue,
            {
                toValue: 1,
                duration: 100,
                easing: Easing.linear
            }
        ).start(() => this.spin())
    }

    render() {
        const spin = this.spinValue.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg']
        });
        return (
        <View style={[styles.flexBox, styles.adjustCenter, styles.backdrop]}>
            <Animated.Image 
            style={{
                width: 150, height: 150, transform: [{rotate: spin}]
            }}
            source={{uri: 'https://vignette2.wikia.nocookie.net/the-paper-puppets-wiki-object-show/images/a/ac/Shuriken.png/revision/latest?cb=20140727162741'}}
            />
        </View>
        );
    }
} 

export default OpenGL;

Animated Shuriken Throwing

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Animated,
  Easing,
  PanResponder
} from 'react-native';

const styles = StyleSheet.create({
    flexBox:{flex: 1},
    adjustCenter: {justifyContent: 'center', alignItems: 'center',},
    adjustBottomCenter: {justifyContent: 'flex-end', alignItems: 'center',},
    backdrop: {backgroundColor: '#bc6f42',},
      welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

class OpenGL extends Component{

    constructor(){
        super();
        this.spinValue = new Animated.Value(0);
    }

    componentWillMount(){
        this.animatedValue = new Animated.ValueXY();
        this._value = {x: 0, y: 0,}
        this.animatedValue.addListener((value) => this._value = value);

        this.panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onPanResponderGrant: (e, gestureState) => {
                this.animatedValue.setOffset({
                    x: this._value.x,
                    y: this._value.y,
                });
                this.animatedValue.setValue({x: 0, y: 0});
            },
            onPanResponderMove: Animated.event([
                null, {dx: this.animatedValue.x, dy: this.animatedValue.y}
            ]),
            onPanResponderRelease: (e, gestureState) => {
                this.animatedValue.flattenOffset();
                Animated.decay(this.animatedValue, {
                    deceleration: 0.997,
                    velocity: {
                        x: gestureState.vx, y: gestureState.vy,
                    }
                }).start();
            },
        })
    }

    componentDidMount(){
        this.spin();
    }

    spin(){
        this.spinValue.setValue(0)
        Animated.timing(
            this.spinValue,
            {
                toValue: 1,
                duration: 300,
                easing: Easing.linear
            }
        ).start(() => this.spin())
    }

    render() {
        
        const spin = this.spinValue.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg']
        });
        const animatedStyle = {
            transform: this.animatedValue.getTranslateTransform() // A helper function to return a translateTransform
        };
        return (
        <View style={[styles.flexBox, styles.adjustBottomCenter, styles.backdrop]}>
            <Animated.View style={animatedStyle} {...this.panResponder.panHandlers}>
                <Animated.Image 
                style={{
                    width: 87, height: 95, transform: [{rotate: spin}]
                }}
                source={{uri: 'https://vignette2.wikia.nocookie.net/the-paper-puppets-wiki-object-show/images/a/ac/Shuriken.png/revision/latest?cb=20140727162741'}}
                />
            </Animated.View>
        </View>
        );
    }
} 

export default OpenGL;

Animated.parallel()

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  Image,
  TouchableHighlight,
} from 'react-native';

const styles = StyleSheet.create({
    flexBox: {flex: 1},
    adjustLeftCenter: {justifyContent: 'center', alignItems: 'flex-start'},
    adjustCenter: {justifyContent: 'center', alignItems: 'center'},
    backDrop: {backgroundColor: '#E6EE9C'},
});

class OpenGL extends Component {

    constructor(){
        super();
        this.animatedValue1 = new Animated.Value(0);
        this.animatedValue2 = new Animated.Value(0);
        this.animatedValue3 = new Animated.Value(0);
    }

    componentDidMount(){
        this.anime();
    }

    anime(){
        this.animatedValue1.setValue(0); this.animatedValue2.setValue(0); this.animatedValue3.setValue(0);
        
        const createAnimation = function (value, duration, easing, delay = 0){
            return Animated.timing(
                value,
                {
                    toValue: 1, duration, easing, delay
                }
            )
        }
        Animated.parallel([
            createAnimation(this.animatedValue1, 2000, Easing.ease),
            createAnimation(this.animatedValue2, 1000, Easing.ease, 1000),
            createAnimation(this.animatedValue3, 1000, Easing.ease, 2000)
        ]).start();
    }

    render(){

        const scaleText = this.animatedValue1.interpolate({
            inputRange: [0, 1],
            outputRange: [0.5, 2]
        })
        const spinText = this.animatedValue2.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '720deg']
        })
        const introButton = this.animatedValue3.interpolate({
            inputRange: [0, 1],
            outputRange: [-100, 400]
        })

        return(
        <View style={[styles.flexBox, styles.adjustCenter, styles.backDrop]}>
            <Animated.View style={{ transform: [{scale: scaleText}] }}>
                <Text>Welcome</Text>
            </Animated.View>
            <Animated.View style={{ marginTop: 20, transform: [{rotate: spinText}] }}>
                <Text style={{fontSize: 20}}>
                    to the App!
                </Text>
            </Animated.View>
            <Animated.View style={{top: introButton, position: 'absolute'}}>
                <TouchableHighlight onPress={this.anime.bind(this)} style={styles.button}>
                <Text style={{color: 'blue', fontSize: 20}}>
                    Click Here To Start
                </Text>
            </TouchableHighlight>
            </Animated.View>
        </View>
        );
    }
}

export default OpenGL;

Animated.sequence()

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Animated,
  Easing
} from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    flexBox:{flex: 1, flexDirection: 'row', flexWrap: 'wrap'},
    adjustCenter: {justifyContent: 'center', alignItems: 'center',},
    backdrop: {backgroundColor: '#E6EE9C',},
      welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

const arr = []
for (var i = 0; i < 500; i++) {
  arr.push(i)
}

class OpenGL extends Component{

    constructor () {
        super();
        this.animatedValue = [];
        arr.forEach((value) => {
        this.animatedValue[value] = new Animated.Value(0)
        });
    }

    componentDidMount () {
        this.animate();
    }

    animate () {
        const animations = arr.map((item) => {
        return Animated.timing(
            this.animatedValue[item],
            {
            toValue: 1,
            duration: 50
            }
        )
        })
        Animated.sequence(animations).start();
    }

    render() {
        const animations = arr.map((a, i) => {
        return <Animated.View key={i} style={{opacity: this.animatedValue[a], height: 20, width: 20, backgroundColor: 'red', marginLeft: 3, marginTop: 3}} />
        })
        return (
        <View style={styles.container}>
            {animations}
        </View>
        );
    }
} 

export default OpenGL;

Animated.spring()

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  Image,
} from 'react-native';

const styles = StyleSheet.create({
    flexBox: {flex: 1},
    adjustLeftCenter: {justifyContent: 'center', alignItems: 'flex-start'},
    adjustCenter: {justifyContent: 'center', alignItems: 'center'},
    backDrop: {backgroundColor: '#E6EE9C'},
});

class OpenGL extends Component {

    constructor(){
        super();
        this.springValue = new Animated.Value(0.3);
    }

    spring(){
        this.springValue.setValue(0.3)
        Animated.spring(
            this.springValue,
            {
                toValue: 1, friction: 1
            }
        ).start();
    }

    render(){

        return(
        <View style={[styles.flexBox, styles.adjustCenter, styles.backDrop]}>
            <Text
            style={{marginBottom: 100, backgroundColor: 'red'}}
            onPress={this.spring.bind(this)}>Spring</Text>
            <Animated.Image
            style={{ width: 227, height: 200, transform: [{scale: this.springValue}] }}
            source={{uri: 'https://vignette2.wikia.nocookie.net/ninjutsu-weapons/images/a/ac/Shuriken.png/revision/latest?cb=20130622150254'}}/>
        </View>
        );
    }
}

export default OpenGL;

Animated.stagger()

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Animated,
  Easing
} from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    flexBox:{flex: 1, flexDirection: 'row', flexWrap: 'wrap'},
    adjustCenter: {justifyContent: 'center', alignItems: 'center',},
    backdrop: {backgroundColor: '#E6EE9C',},
      welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

const arr = []
for (var i = 0; i < 100; i++) {
  arr.push(i)
}

class OpenGL extends Component{

    constructor () {
        super();
        this.animatedValue = [];
        arr.forEach((value) => {
        this.animatedValue[value] = new Animated.Value(0)
        });
    }

    componentDidMount () {
        this.animate();
    }

    animate () {
        const animations = arr.map((item) => {
            return Animated.timing(
                this.animatedValue[item],
                {
                toValue: 1,
                duration: 4000
                }
            )
            })
        Animated.stagger(10, animations).start()
    }

    render() {
        const animations = arr.map((a, i) => {
        return <Animated.View key={i} style={{opacity: this.animatedValue[a], height: 20, width: 20, backgroundColor: 'red', marginLeft: 3, marginTop: 3}} />
        })
        return (
        <View style={styles.container}>
            {animations}
        </View>
        );
    }
} 

export default OpenGL;