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

[00:00] We start out by showing a view that fades in by animating its opacity. We add a constructor, and initiate the component state with an animated value, which we instantiate with 0We choose 0since the view should be fully transparent in the beginning.

[00:19] We could hook up this value to multiple style attributes of an animated component, but in our case, we hook it up only to the opacity of the view. This won't work out of the box, because by default the view component doesn't support animation.

[00:34] We replace the view with an Animated.View. Yet, there are more pieces missing. We need to define the behavior of the animation. In our case, we want the animation to start on componentDidMount, and we want it to be timed. To do that, we can use Animated.Timing.

[00:53] It is a function that accepts two arguments. The first one is the value to modified, and the second one is the object of options. The options object allows us to provide to value which defines the final value of the animation. While not mandatory, you also want to customize the duration, and set it to three seconds.

[01:14] Last but not least, we need to invoke Start on our animation, and viola, the view is fading in. So far, we only animated the view itself, but what about its children? Let's add a text inside. As you can see, the text inside is affected by the same animation.

[01:35] Animated comes with a couple of components, for example, Animated.Text. In this case, the text itself is fading in. Further, Animated supports image out the box. We can change it to image, and add back the style attributes height and width.

[02:07] Now that we have an idea of how to apply these animations, let's explore the three different types of animations, timing, spring, and decay. Just as a reminder, as of now, we have only used timing, which maps a time range to a value.

[02:22] There's one more option that we haven't seen yet, and that's easing. Easing allows us to specify the rate of change of a value over time. Easing functions are not specific to React VR, nor React, and therefore basically you can provide any function that accepts a value X and returns a new value.

[02:41] By default, the easing functioning in timing is EaseIn-EaseOut. If you want to change that, you can provide a linear function, for example. You would take X and simply return X. This way, the animation will progress constant over time.

[02:56] Now, that we know everything about the type timing, we move on to the type spring. As the title suggests, it behaves like a spring and creates a bounce effect. For clarity, we change the variable name to springValue, but we also set it to -1.

[03:20] Same as with timing, also springs only required option is to value. We set it to zero. We apply the animation to our image translation Y, and refresh the page. The image moves from position to -1 to 0now. As you can see, it bounces a bit. Compare to timing, spring doesn't accept duration, but in comparison a couple of other options to adapt the animation.

[03:49] For example, we can supply the tension option, which affects the speed. Its default is 40, and we change it to 1. In addition, we can supply the friction, which will affect its bounciness. The default is 7, and we change it to 2. As you can see, the animation became slower, but it overshoots a bit more.

[04:12] Another animation type is the decay animation. This animation starts with an initial velocity and gradually slows down to make it come to a stop. Again, for clarity, rename the variable stored in the state.

[04:24] Decay itself requires only velocity to be defined, and we set it to 001. As you can see, the image is moving. There is another option, which is deceleration. By default, it's set to 0997, and we change it to 09985, and the effect is moves a bit further. Now, we know about the three animation base types.

[04:57] One cool thing about Animated though is animations can also be combined by using composition functions such sequence and parallel. Let's combine two animations that we already know, the fade in via timing, and the transition using spring.

[05:13] If you want to run them in parallel, we can use Animated.Parallel and pass in an array with the two animations. After refreshing the page, we can see how both animations run in parallel. If you want to run animations in sequence, we can use Animated.Sequence instead of Animated.Parallel.

[05:58] Sometimes, it is desired to have a break between two animations that are running in sequence. This can be easily achieved by using Animated.Delay. Delay is just a function and it accepts one argument, the time for how long the delay should be. In our case, we set it to 1,000. The second animation is now delayed by one second. One, two, three, fade in done. One second delay, and then the spring animation. Pretty cool.

[06:26] As of now, we've only explored how to animate the three core components, View, Text, and Image. This is because they are available in Animated. What if you try to animate a box, for example try to rotate it on it's Y-axis? Let's give it a try.

[06:43] Remove the image, and add a box. Position the box, and apply two rotations. In order to make the box surface a bit more obvious, we add an ambient light with an intensity of 05. So far, so good. But by default, components are not animatable.

[07:18] Luckily, Animated ships with the higher order component createAnimatedComponent. It allows us to take any component, may be built-in, created by us, and enhance it to be animatable. Use this higher order component to create an animated box component.

[07:41] Now, we add a rotation value to the state. Initialize the animation in componentDidMount. After replacing box with animated box, providing the animation values to the Y rotation, and reloading the page, the box starts rotating.