Add animations to React 360 components
Animations are an important part of modern UX.
Using the Animated library which is supported both in React Native and React 360 we're able to make our app much more alive by adding animations to it.
In this lesson we're going to learn how to use createAnimatedComponent to create an AnimatedEntity which we're going to use to animate a 3D model of the Earth.
Instructor: [0:00] We have an updated version of our app with the app component over here. It would be great to be able to animate that. We would like to make the arrow spin and bounce up and down. In order to do that, import animated from React 360.
[0:13] Next, we're going to create a new animated entity component. Basically, we're going to wrap the entity component inside of an animated library imported from React 360. We're going to replace the entity with the animated entity.
[0:27] Next up, we're going to create a new animated value. I'm going to create a rotation value, and it's going to be a new animated value. By default, I'm going to set it to zero. Next up, we're going to create a spin function.
[0:38] Inside of this function, first, we're going to reset the rotation value to zero. Next, we're going to use the animated timing function to modify this rotation value from to 360. We're going to do this rotation, and we're going to provide an options object.
[0:55] First, we would like to set the rotation value to value 360 over the course of four seconds. We're going to set the start function. Start function takes a callback, so what should happen after the rotation is completed.
[1:08] We should start the rotation again, because we would like to make an infinite animation. Next, I'm going to create a componentDidMount function, and I'm going to run this spin. In order to use the spin value, we're going to use it here in the rotate Y transform value.
[1:23] I'm going to do this rotation. After I save and refresh that, we're going to see the updated results. Right now, we have this spinning model of the arrow. The problem is that you will notice that this animation is going to slow down at the end.
[1:37] The reason this happens is that by default, the animated timing function is using an in and out easing function. Basically, what that means is that both the beginning and the end of the animation is a bit slower.
[1:49] In order to fix that, we're going to import easing from easing. I'm going to set the easing to easing linear. If I save and refresh that, we're also going to have a spinning animation, but the speed of the animation is consistent, so it doesn't slow down.
[2:06] Next, we're going to make our arrow model jump up and down. First, I'm going to create two variables for low and top jump value. I'm going to create a new jump value, and it's going to be a new animated value.
[2:18] The default value is going to be low jump value. Next, I'm going to create a jump function. It's going to take the current value as an argument, and we're going to create a new variable for the next value. Next value is going to be whatever the current value is equal to, top jump value.
[2:38] We're going to replace that with the low jump value. In the other case, we're going to use the top jump value. We're going to use the animated timing function to modify this jump value. We're going to provide options.
[2:53] We would like to modify this jump value to value of next value over the course of a half a second. Here, we're going to :start, provide a callback, in which we're going to call the jump function with the next value.
[3:07] Then we're going to call it in the componentDidMount. I'm going to do this, jump, and I'm going to provide low jump value argument by default. I'm going to use this value here in the translate Y. I'm going to replace that 1.5 with this jump value.
[3:22] After I save and refresh that, we can see both infinite animations running at the same time. The arrow is both spinning and jumping.