Animate Rotation with React Native Interpolate

[00:00] We'll start by importing Animated from React Native. Next, we'll create a componentWillMount life cycle method, then type this.animatedValue = new Animated.Value, and we'll give it a default value of 0Next, we'll setup a variable called interpolateRotation, and we'll assign it this.animatedValue.interpolate which is a function that takes a configuration object.

[00:24] It takes an input range, and we'll say it's from zero and ends at one, and an output range, we'll say it goes from 0degrees to 360 degrees, for a full rotation. We'll look at another variable, which will be our animatedStyle, we'll assign it an object, we'll give it a property of transform, which is an array, which will take multiple transforms, but we'll use rotate, and we'll pass in our interpolateRotation.

[00:50] Now, we'll change our box view from a regular view to an animated.View, and we'll give it our new style. Now, we'll create a componentDidMount life cycle method, we'll call it animated.timing, which is a function that takes an animated value, and a configuration object, we'll animate to 1 over the course of 1500 milliseconds.

[01:20] We'll call start on our animation, and now when we refresh our emulator, we can see that it took 1500 milliseconds to do a complete rotation. The output range can be anything. If we change this from 360 to 720, and refreshed our emulator, we can see that it did two complete spins. We can animate more than just degrees. We can also animate radians. We'll change our start from 0radians to 10 radians, with each radian is about 57 degrees, so it will animate to 570 degrees. We'll refresh and see that it's spun to 570 degrees.