Mind blowing animation in React Native and Expo with Animated API

welcome back to my channel guys long time no see and i'm really pleased to be again here on youtube creating video tutorials for you and in this video we will be taking a look at how we can create a team version in react native i got inspired by kuberto they created a really nice slider using this technique and i'll show you my way of implementing it in react native by playing around with perspective scale and rotation of a circle and hopefully you'll learn something new and you can apply it either in the existing projects or in the future com projects of yours so let's play the intro and jump straight into vs code and start coding because yeah this is our passion right okay i'm in this code we are in vs code here and i already have the base key for the scaffold here i have the main component which is a view containing a circle component and a circle component let me remove this so you'll get a better understanding it has an absolute field view here and inside we have the circle so basically the gold background here is the circle container and the circle itself is this guy here and inside this circle i'm i just have a button so you can you can press on it and some some small styling here and what i would like to do here is to create the animation and pass the the animation value the animated value down to the circle so in the app here let me create an animated value animated value which is a react user f and then a new animated value which is starting from 0 and i'll get the current value and with this one i'll pass it to the circle so animated value is equal to animated value and for now i would like to create just a tiny a tiny animation here saying that whenever the user will press on the circle here i receive this callback based on the touch opacity on press and when this is pressed i would like to start the animation to value one and i would like to call the timing function here and i'll have the animated value and i would like to go to value one with a duration of let's say three seconds and i will not use the native driver for this example and i would like to start the animation with this one because right now when you press you have the animated value also the prop here we can we can get it in the circle component so along with the on press we have the animated value and what i would like to show you is how simple it is to rotate it and scale it and apply a different perspective and you'll see what will happen with and without the the perspective here so i'll i'll modify this view to be an animated view so we can animate it based based on the animated property that it's a prop and we will have a transform here so the transform will have the rotation rotate y axis which is the animated value and then we will interpolate and the we will have an input range and output range the input range is going to be 0 0.5 and 1. so we would like to have it from the start in the middle of the animation and then at the end and for the rotation i would like to start from zero degrees so normal position go to n minus 90 degrees and then to minus 100 degrees and along with this rotation let's let's hit save and see see what what's actually happening so you you see this this button is rotated minus 180 degrees when you press on it and along with the rotation i would also like to apply a scale so i will again let me copy this interpolation from here and we will have the interpolation it's gonna be again zero zero point five and one so we will get the middle of the animation but the output range will be different we will start from 1 we will go up to 8 so scale is going to be 8 and then back again to 1. and if i hit now save and play the animation as you can see it's it's scaling and also rotating on the same time but this is not exactly what i presented in the first place right so in order to do that we'll only need to apply the perspective so go here in the first place and watch out what will happen when i'm i'll add a perspective to the animation to the to this circle view so perspective is gonna be let's apply 400 for now and hit save and play now the animation and you'll see that something will will look almost as as it was in in the initial animation right and because we've applied the perspective now we have this fake i will say camera which is basically the circle it's getting closer like the edge of the circle is getting closer to the camera and this is the exactly the the behavior that we would like to have and one more thing here i would like to also apply a translate x so translate text copy paste this animated value but now instead of uh d for for this output i would like to move it from zero percent to fifty percent and then back to zero percent so basically i'll shift this to the right uh 50 so now if i hit refresh you'll see this is also moving and then backing going back again now that we have this animation i would also like to animated it backwards right so now it's going to the to value one but i would also like to animate it from value 1 to value 0. and to do that i would like to create here a state saying index let's say and set index which is a react use state and i will start from zero and when the user will press it i would like to start the animation but first of all i'd like to move this to to to its own function so like to do animation any animation it's a method that's directly returning and animated without the start value and here i would like to pass the to value so this animation i would like to call it here but instead of uh passing the two value hard coded i would like to say uh if index is equal to zero to one i like to go to zero otherwise go to one and here i would also like to say set index if index is equal to one go to zero otherwise it's one so in this case i'll i'll set the state with it so i now know when the animation is finished i'm i i can also go back because i already set the index and i i can i can go from one to zero and this will create this uh this effect and this is not like the right behavior as you can see the circle remains the same background color has the same background color after the animation has finished and we would like to flip the colors exactly in the middle of the animation so 0.5 and in order to do that based on this animated value we would like to apply a different background color to the parent view and also to the circle itself and to do that i would create here a constant saying the bg which is the animated value and i would like to interpolate it and the input range is gonna be something and then the output range is gonna be an array here so i like to start from zero zero point five and one and this time i would like to not animate but actually flip directly the the background and in order to avoid any animation and directly switching the colors i like to immediately apply the initial background so i will do 0.001 so as close as i can get to the zero and then right immediately after 0.5 so exactly after the middle of the animation in the middle of the animation i would like to flip it to the uh to the circle color in our case is this black one so initially we will start from gold up to 50 percent and when this one is met i would like to immediately flip the car the the background color without any animation so in this case it's 0.5001 okay and for the background i like to start from gold gold gold so we will stay until this point gold like the background color but when the circle it's filling the entire half of the screen we would like to directly switch to the circle background color and in our case let me go to the styles here we have the 444 right so now i'll flip it and keep it until the end of the animation and let me move this to a constant because we'll also use it so input range we'll use it also for the for the circle itself but now let me let me convert this into an animated view animated view and here i would also like to apply this background color right the background color is gonna be the container bg and just hit save for now don't worry about the circle and you'll see that in in the middle uh in the middle of the animation now it's getting everything like the the same background color right and to to make this uh to make this concept like really working i would also like to apply the same behavior to the circle but this time instead of gold i'll apply the circle color and when this is exactly after the middle of the animation i'll switch it to gold so exactly exactly the opposite of of the container bg so let me copy this constant here this interpolation and say the circle bg the circle bg instead of gold i'll go to from 444 to gold right and apply this background color to the circle itself so here i would also like to have a background color it's the circle bg and now when when the animation will be in the middle this circle even though it's on the perspective side right it's gonna let's let's assume that this is the circle and it's gonna be here and now when it's moving after 90 degrees it's gonna take the gold background color so it's flipping the it's switching the colors with the background so let me save let me refresh this one and you'll see that the background color it's becoming the circle uh background color and the circle takes the background the initial background color so more or less this is this is the main concept i was doing just just look again without the perspective just to get our uh just to see what's what's actually happening and because uh i think the default perspective it's 1000 or something like that we we don't have that camera or the view is not closer to the to the circle and the edge of the circle is pretty far away i'll say from from the from the circle itself from the edge and what watch what will happen when i'm applying 100 perspective this circle will come even closer to me and it's is this full of effect i will say you see it's it's shrinking this circle because because of this perspective but i'll apply 400 i think that it's it's a it's a great concept to just apply the 400 and you you you see that this this switching it's is really smooth so you don't have any any problems with flipping the backgrounds and whatnot so i think that this is this is the right the right time to end up this tutorial hopefully you found it useful let me know if you wanted to dig deeper into this concept and create an actual slider but i think that for now you'll be able to create your own slider using this technique and i'm really looking forward to see what you were building with the dot dot inversion technique and please let me know down in the comments if you have any questions or if i can help you somehow see you in the next video and don't forget to subscribe smash the like button thank you so much and see you in the next video guys see ya

Channel: Catalin Miron

Views: 54,373

Keywords: animated api react native, react native animation tutorial, react native animated tutorial, react native expo, react native animated, React native animation, react native animations, cross platform react native, react native tutorial, react native tutorial for beginners, react native, cuberto, cross platform, css perspective animation, great animation, awesome animations, React native tutorial for beginners 2020, react native cuberto

Id: vQNg06Hf0MQ

Length: 16min 34sec (994 seconds)

Published: Wed Jul 15 2020