Animate Styles of a React Native View with Animated.timing

Animate the Scale of a React Native Button using Animated.spring

Create a Draggable Card with React Native Pan Responder, and Animated.decay

Animate Colors with React Native Interpolate

Animate Rotation with React Native Interpolate

Animate a Sequence of React Native Animations with Animated.sequence

Stagger React Native Animations with Animated.stagger

Animate Multiple Animations at the Same Time with Animated.parallel

Create a Flip Card Animation with React Native

Animate React Native UI Elements

By using the `interpolate` function, the  `Animated.View` can be rotated using both degrees and radians.

[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.

Course

Animate React Native UI Elements

Animate Rotation with React Native Interpolate

Share this video with your friends