The Animated API

React and React VR make this easy as the animation API has a number of animation types that make this straightforward, without having to do math or have key frames, as you would with traditional animation. Instead of keyframing, you can ramp up things slowly, bounce, and pause declaratively. These props are spring, decay, and timing; more detail on these is in the online documentation at http://bit.ly/ReactAnims.

It's fine to animate, but we need to know where we are going. To do this, the Animation API has two value types: value for scalar (single values), and ValueXY for vectors. You might wonder why in this case a vector is only X and Y—ValueXY is intended for UI elements, that by their nature, are flat. If you need to animate an X, Y, and Z location, you would use three scalars.

First, we'll create an animated teapot that spins. This will be especially helpful to see how our texture mapping works. If you've been following along the code, your SpaceGallery app should already...