Create An Exploding Heart Button in React Native
In this lesson we'll create a like button that explodes with hearts. We'll use Animated.parallel to execute the bouncy heart animation as well as the series of hearts exploding at the same time. Then we'll use an array of Animated.timing animations and then use Animated.stagger to make the hearts appear with a 50ms stagger. We use Animated.delay to wait before we then use Animated.stagger again to hide the hearts in. Finally our Animated.sequence will cause each of those animations to happen one after the other.
[00:00] We'll start by creating a style called Heart into a position, absolute, top zero and left zero.
[00:09] Now we'll go create some Hearts. We'll start by creating a Heart, adding inFill to true, style =styles.Heart. We'll copy and paste this six different times.
[00:26] We'll go create a function which we'll call const getTransformation(Animation) which will be a function that takes an Animation -- scale, Y, X, rotate, and opacity. We'll do a series of interpolations on the Animation to create our effect. But first, you const scale(Animation) to be an Animation.tripleIt().
[00:58] This is a function that takes an object in an input range to be zero to one. Our output range will be zero to whatever the scale that gets passed in.
[01:08] We'll do our X as well, so say const XAnimation =Animation.tripleIt(), input range zero to one, and our output range zero to the X that gets passed in. We do the same for our Y, so we'll say YAnimation instead, and translate to our Y.
[01:30] We do the same for our rotation. We'll say rotateAnimation. However, instead of zero, we'll switch that to zero degrees and then our rotate that gets passed in.
[01:44] Finally, we'll do our opacityAnimation. We'll say opacityAnimation and we'll do it to the opacity that gets passed in.
[01:55] Now we'll set up our return value, so it will be an object. We'll say opacity and pass in opacityAnimation. We'll then do our transform, which is an array. It will take a series of transforms, so our first will be scale. We'll say scaleAnimation.
[02:11] Our second will be translateX. We'll pass in our XAnimation. The third will be translateY. We'll pass in our YAnimation, and the fourth will be rotate, so we'll pass in our rotateAnimation.
[02:29] We'll go apply our animations to our Hearts. We'll switch all these over to being arrays, and then we'll add getTransformation(Animation). Inside of here, we'll say this.state.Animations, zero, and we'll pass in our configuration stuff. We'll say, 08, -60, 035 degrees, and 08 opacity.
[03:05] Because the other Hearts will follow the same configuration, we'll just remove the five Hearts and replace them with five of the Hearts we just created.
[03:16] We need to adjust each of these Hearts to match the configuration [inaudible] . First, we'll change these, so that they are referencing different animations. We'll change this to 03, this one to 03, this one to 07, and this one to 04.
[03:32] We'll change this one to -120, this one to -150, this one to -120, this one to -120, and this one to -280. For X, we'll change this one to -120, this one to +120, this one to -40, this one to 40, and leave this one at 0For our degrees, this one will be -35, this one will be -35 as well, this one will be -45, this one will be +45, and this one will be +10 degrees.
[04:06] Finally, we'll change our opacities to 07, 06, 03, 05, and 07. Now that we have our Hearts set up, let's configure our animation integer-like. You first need to create const showAnimations with this.state.Animations.map to be passing a function which will give us looping over our animations, and will return animated.spring.
[04:38] I'll do our animation to value one with a friction of four. We'll do the same thing for our hideAnimation, so we'll copy this. We'll say hideAnimations, we'll change our true value to zero, a duration of 50, and we'll change this from animatedSpring to animatedTiming.
[05:03] Then we'll do a reverse, so that our Hearts hide in the reverse direction. We'll coordinate our animations with our Bouncing button.
[05:09] We'll say animated.parallel, which is a function that takes an array of Animations. We will delete this and paste our animatedSpring into here -- parallel will cause the rest of our animations to trigger at the same time.
[05:27] We'll then do Animated.Sequence which will execute one animation, one after another, which is a function that takes an array. We'll say animated.stagger, 50 milliseconds, and then do our showAnimations.
[05:44] Then do animated.delay which will pause for 100 milliseconds before it goes on to trigger the next animations.
[05:50] Also animated.stagger again, 50 milliseconds, and trigger a hideAnimations. We'll call start on this set of animations. We'll then add back in our callback function, when this is complete, and say this.state.scale.setValue to zero to reset our Bouncing Heart animation.
[06:11] When we go refresh our emulator, and we press on our button, we can see that our Heart bounces. Hearts explode and retract back inside.