Flutter Animation Tutorial #8 - Curves

all right then gang so up until now all of our animations have followed a linear speed from a to b right they don't start slow and they magically speed up halfway or they don't start fast and then slow down towards the end they start and end at the same speed now in flutter we can change this and we can control the speed acceleration and deceleration of animation by using curves now curves are just that they're curves on a graph that look a bit like this and they signify the speed of an animation at different points in time during the animation so the x direction going upwards here that represents the animation value from beginning to end in this case from zero to one and the t direction going across that represents the time or the duration of the animation so imagine that the bottom right here is the starting point of the animation and the top is the end now a linear progression without using a curve would just go straight up at a constant speed for example if we're moving something from this point to this point it would just go straight up at the same speed right but curves speed up and slow down points of the progression so if we take a look at this if we can play it then we see that this curve makes it bounce a little bit and then go up right if we play this curve then it bounces a bit and goes up let's look at some different ones i'm going to go to decelerate so it gets slower towards the end and if we take a look at some of these down here let's see easing quad you can see that this speeds up a little bit towards the middle and then starts to slow down again slightly at the end and there's these easing quartz it speeds up a lot right here and then starts to very slightly slow down at the end now generally speaking the steeper the curve at any point like here at that point the animation is going to be quicker and the shallower the curve so when it's just going quite horizontal over here that means it's going to be slower during that point so now let's try using some curves in our project for our animations so the first animation i want to add a curve to is going to be this screen title right here so when it comes down and fades in i want to add a curve to that now that is the trip or the screen title rather and the first thing i'll do is change the duration from 500 milliseconds to 1000 milliseconds just so we can see the effect of this for a little longer and i'll also change the top margin from time to time by 20 to 50 again just to exaggerate the effect so we can preview what's happening a little easier alright so if we save this so far and preview again we're going to see that go down a further distance and take a little bit longer all right so now let's try adding a curve to this animation so basically we can add a curve property to any built-in animation widget like animated opacity animated position animated container and we can also add it into the tween animation builder which we have right here so i could add a curve inside this i'm going to do it below the duration and we'll say curve to do this and to access all of the curves built into flutter we use the curves object and then we can say dot whatever curve we want to use so to begin with let's try ease and we'll go with quartz all right so save this and let's preview by clicking restart and just watch the title up here so you can see it speeds up towards the end and in the middle alright so that's a little bit different doesn't look great but we can see it working okay so let's try a new one this time i'm gonna go back and say i want to try the bounce one so we'll try bounce in and save that and restart over here and now we can see that little bounce effect when it comes in again doesn't look great but you can see the effect i'm gonna settle on one which i quite like which is ease in so i can say dot ease in like this save it and i think this looks quite natural so it's a very subtle effect but you can see that it kind of eases in now okay so now i want to change this back to 20 and i'm going to change this back to 500 now we've previewed that i'm going to refresh just to see that once more time and again it is going to be a very subtle effect doesn't do much in this situation but you can see that we can use these curves to control the speed of the animation at different points okay so that's using a curve inside an implicit widget but what if we wanted to use a curve alongside an animation controller well let's go to the heart widget over here and you can see we've got our controller and the two different animations we've got the color animation and the size animation so what if we wanted to create a curve for both of these or any of these animations well we can do we can create a new curved animation so first of all i'm going to create a new variable animation and call this curve now down here i'm going to create a new curved animation so we'll take that variable we just created curve and set it equal to a curved animation like so now first of all we say what is the parent of this curved animation in other words what is controlling it well again it's going to be this controller right here so we say the parent is the controller and so now the controller is basically going to control this curved animation because it still has the duration and the ticker etc and the curved animation needs that so we now have this hooked up with the controller we also need to specify the curve that we want to use so i can say here curve and then again use the curves object and from that let's try something like slow middle so basically it starts a bit faster slows down in the middle ends a bit faster but again this is going to be a really subtle effect okay so we have the curve now but then how do we apply that curve to these different animations because automatically it doesn't do that yeah we've associated it with the controller but we still just use the controller right here and kind of bypass the curve so instead of saying right here we want to use the controller inside the animate method we can say we want to use the curve that we've created right here instead and under the hood it's still going to use that controller because the parent of the curve is that controller but now also we're applying this curve to this animation as well and we could do the same thing for this over here we could apply the curve not the cure to this animation as well so now if i save this and restart the process then we might see this but again it's going to be such a subtle effect because the animation is quite quick 300 milliseconds so you probably won't notice too much in this but you can kind of see it slow down as it gets big and then shrink again okay if we change this to something like 1 000 milliseconds we probably will see this in a slightly more exaggerated way but again it is going to be quite subtle so let me try this slows in the middle then goes back to normal all right okay so i like that effect but i think that is too slow so i'm gonna go back to 300 and leave it as that so let's just make sure this is still working yep that looks pretty nice so now we know about curves next up we're going to be looking at animating our list items right here onto the screen when we first load the app

Channel: Net Ninja

Views: 29,880

Keywords: flutter, flutter tutorial, flutter animations, flutter animation, flutter animations tutorial, tutorial, animation, app animation, flutter animation tutorial, animation tutorial, flutter custom animations, curves, flutter curves, animation curves

Id: d0wsoY6meBY

Length: 7min 52sec (472 seconds)

Published: Fri Aug 07 2020