Flutter Animation Tutorial #7 - Tween Sequences

Key Takeaways

southern gang the next step is to make the animation for the pulsating effect whenever we click on this heart right here so i want to grow and shrink it all in one go whenever we click on it and we'll be using the size property to do that so to begin with it's going to be 30 pixels then it's going to grow to 50 when we click on it and then back to 30 again all in one go so this is no longer a linear progression from one value to the next it's from point a to begin with then to b then back to a again all in one go every time we click it so it's going to grow and shrink all within that duration of what is currently i think 500 milliseconds okay so a normal tween won't work because they just have a single begin and a single end value and this time we have three values to tween between we have 30 pixels to 50 pixels and then back to 30 pixels so to achieve this we'll be using a tween sequence so a tween sequence does pretty much what it says it does on the tin it sequences through different tweens so we could have a sequence of three or four tweens lined up next to each other and then when we run the animation it's going to go from one tween to the next to the next to the next so we can start to make more complex animations in our case we're going to have a sequence of two tweens the first one is going to be to grow the heart so from 30 to 50 pixels and then the second tween in the sequence is going to be to shrink it from 50 pixels to 30 pixels again so the first thing i'm going to do is create a new variable up here and that is also going to be an animation object but this time to control the size a bit like this so this right here was for color and in fact you should probably say that it's a color animation right here and also we're going to do another one now so animation this time it's going to be to control a double because we're going to be using a double for this thing right here the size okay so we'll call this size animation all right so now let's create that tween sequence all right so down here underneath where we create the color animation let's also do one this time for the size animation and we're going to set that equal to a tween sequence this time now inside a tween sequence we need a list of tween sequence items so let me go down to the next line and i'm going to say that this list will be of type tween sequence item and then also that is going to be of type double each of those tweens because they're going to return a double to tween between which is going to control the size okay so we're kind of double typing here we have a list right here which is of type tween sequence items so each one of these things is gonna be its own tween sequence item and then each of those is gonna tween a double i hope that makes sense okay so we need two tween sequence items inside this so let me first of all say tween sequence item and then this is gonna be type double and we'll create that so this takes two properties first of all a tween which will dictate where the tween begins and ends and the second property will be the weight which is basically how important this particular tween item is what is the weight of it so let's do the tween first of all so we'll say tween double and then we want this to begin if we can spell this correctly at 30 so that's the initial size and then end at 50. now we also need like i said the weight so let's do that and we'll just split this up so the weight of this is going to be 50 and the other one is going to be 50 so they're equally weighted and the animation spends just the same amount of time on this one as it will the next one okay so that's our first tween sequence item now we need another one which is going to start at 50 and go back to 30. so let me grab this and paste it down here and at this time it's going to begin at 50 and end at 30. and that my friends is all there is to it pretty simple right now i know there's a lot of types here but all we're essentially doing is saying that we have a list of this type right here and inside that list we have individual tween sequence items which are going to give us doubles because remember we're using doubles here to interpolate between two values all right so now we have that tween sequence item we're still getting an error and that's remember because this is not an animation we need to let this be an animation so to do that we call the animate method just as we did up here on the color animation so let me copy that and let's paste it at the bottom down here and now this is an animation and we're just telling our controller to control this animation now so it's going to take 500 milliseconds to go through this tween sequence makes sense okay so now we can use this value the size animation value down here for the size so let's do that underscore size animation dot value like so and if i save this now i'm going to restart the process and it looks like we have a little error there but i think if we restart this should work press over here and if we click on this notice it grow and then shrink and if we click again grow and shrink grow and shrink now i think that is a little bit too long of a duration 500 milliseconds so i'm going to knock this back down to 300 and save that and let's try this again in fact i think we'll need to restart because we've changed up here the state so let me do that and click on one of these again click this and that looks a little nicer okay you could take this down to 200 if you wish entirely up to you so that my friends a tween sequence can be used and the good when we want to combine tweens together one after another as we have done here next up we're going to look at curves