Create a Flip Card Animation with React Native
In this lesson we'll learn to use backfaceVisibility style property and rotateX to create a vertical flip animation, and rotateY to create a horizontal flip animation.
[00:00] Start by importing Animated from React Native. Now, we'll take a basic look at our application structure. You have a container view wrapped within another view and our two cards, front and back. We have a flip button.
[00:13] The important piece I wanted to show off was the backface-visibility. The backface-visibilities have them hidden, which means when this card rotates out of the way, it will be hidden. When it rotates back, it will be visible.
[00:24] Next, we'll create a componentWillMount lifecycle method. We're going to animate the value. We're typing this.animatedValue = new animatedValue. We'll set the default value to 0Now, we'll create a front interpolate. We're typing this.frontinterpolate = this.animatedValue.interpolate, which takes configuration object and an input range, which we'll say is from 0to 180, and an output range which will output from 0degrees to 180 degrees.
[00:56] Now, we'll create our back interpolate. We'll type this.backinterpolate = this.animatedValue.interpolate. It takes the same configuration object and we'll say the range of 0to 180. Our output range will be 180 degrees to 360 degrees.
[01:16] Now, we'll create our animated styles. We'll say const front animatedStyle is equal to a configuration object which has the transform property, which is an array that takes various transforms. We'll use Rotate X and pass in this.frontinterpolate.
[01:33] Now, we'll do our back one as well. Const back animatedStyle, object transform, an array, and Rotate X with this.backinterpolate. Now, we'll change our regular views to animated views and apply the styles that we created. Pass in front animatedStyle here and back animatedStyle to the card on the back.
[02:09] Now, if we refresh our emulator, we can see that the front card is now on the front. Based upon our current rotate settings, the back has now rotated out of the way. Let's attach an on-press to our touch bowl opacity, and we'll call this.flipcard, which will then trigger our animation.
[02:27] We'll create the flip card function and type animated.timing, pass in this.animatedValue, which takes an object. We'll animate to 180 over the course of 800 milliseconds. I'm going to call start on our animation, refresh our emulator, and click. We can see that we now flipped our card.
[02:56] In order to flip back, we need to know the current value of our animation. First, we'll add a listener to it by typing this.animatedValue.addlistener, takes a function, which passes in a value object with a value property. We'll destructure value out of it. We'll say this.value = "value."
[03:18] We'll then also set our default value to 0Now, we're tracking our value. We can set up two flips. If this.value is greater than or equal to 90, then we would want to flip it one direction, otherwise we want to flip it to the other direction.
[03:37] Here, place this to flip to the backside. We'll copy that. If it's greater than or equal to 90, then we'll flip back to 0If I refresh, flip, and then we can flip back. To make a more realistic flip, rather than timing, we'll change to the spring animation, which instead of duration, we'll delete that and add in friction of 8, and tension of 10 to indicate a realistic flip animation.
[04:09] Now when we refresh, you can flip and flip. We're currently flipping vertical. If we wanted to flip horizontal, all we need to do is change our Rotate X to Rotate Y. When I save and refresh, I can flip and flip back the other direction.