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