[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);