This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Animate Rotation with React Native Interpolate

    Jason BrownJason Brown

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

    react-nativeReact Native
    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss