[ReactVR] Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR

Motion is an important aspect of a complete immersive experience, therefor we are going to look into the animation API Animated.

Animated allows us to express a wide variety of animation patterns to animate text, images, and views.

In addition we'll leverage the higher order component, <CreateAnimatedComponent/>, to create a rotating box!

 

import React from 'react';
import {
  AppRegistry,
  Animated,
  asset,
  Pano,
  Box,
  Text,
  View,
  Image,
  Model,
  Sphere,
  PointLight,
  AmbientLight,
  DirectionalLight,
} from 'react-vr';

const AnimatedBox = Animated.createAnimatedComponent(Box);

export default class app extends React.Component {
  constructor() {
    super();
    this.state = {
      fadeIn: new Animated.Value(0),
      springValue: new Animated.Value(-1),
      rotation: new Animated.Value(0)
    }
  }

  componentDidMount() {
    Animated.timing(
      this.state.rotation,
      {
        duration: 10000,
        toValue: 930
      }
    ).start();
    Animated.sequence([
      Animated.spring(
        this.state.springValue,
        {
          toValue: 0,
          duration: 3000,
          tension: 1,
          friction: 2
        }
      ),
      Animated.delay(200),
      Animated.timing(
        this.state.fadeIn,
        {
          duration: 1500,
          toValue: 1,
          easing: (x) => x 
        }
      )
    ]).start();
  }

  render() {
    return (
      <View>
        <View>
          <AmbientLight intensity={0.5}/>
          <AnimatedBox
            lit
            dimWidth={2}
            dimDepth={2}
            dimHeight={1}
            style={
              {
                color: 'orange',
                transform: [
                  {translate: [0,2,-3]},
                  {rotateY: this.state.rotation},
                  {rotateX: -40}
                ]
              }
            }
          ></AnimatedBox>
        </View>
        <Animated.Image 
          style={{
            layoutOrigin: [0.5, 0.5],
            transform: [
              {translateZ: -1},
              {translateY: this.state.springValue}
            ],
            height: 0.5,
            width: 0.5,
            backgroundColor: '#335'
          }}
          source={asset('4.jpeg')}
        >
          <Animated.Text 
            style={{
              opacity: this.state.fadeIn,
              color: 'green',
              fontSize: 0.10,
              textAlign: 'center'
            }}
          >Grit</Animated.Text>
        </Animated.Image>
      </View>
    );
  }
};

AppRegistry.registerComponent('app', () => app);