Hello in this video I am going to show you the tween animation. tween is just short for in between because you essentially specify end and start values or more I should say start and end value. And we'll be using a colon version and between animation calculates what it should be in between without manually set all of those are potentially hundreds or thousands of frames to implement. It's pretty simple. You get tween animations for all sorts of stuff exploiting tween, you can do for color, textile in alignment, border radius crews, anything that you can, you know, modify, you can have some sort of form of tween for it. So I'm going to do the tween animation for color.
The principle is pretty much the same for anything else. If you have any questions, feel free to drop me a message. So first of all, what we need to do is need to say for our class with single ticker provider state mixin. This will be required For the tween animation because the V sync will be linked up to it. Next, what we're going to do is create a couple variables. First one is going to be animation control on the call list.
Roll Up next is going to be animation. And this is going to be color obviously, for you or animating something else feel free to a different property. And I'm going to name this animation. Next, what we are going to do is create the constructor for the no homepage state constructor. So the constructor for this class, and this will basically just initialize these two variables that we've just created. So to do that, we'll just do underscore controller equals animation controller and we can put this moment so we are going to say so We're going to set a duration.
So the duration is going to be duration. And you can specify milliseconds, days, hours, whatever you want only millisecond, don't do it over three, I can do over four and a half hours, which is four and a half seconds. Now when you specify the thing, which is virtual, which is the synchronization of the animation, so if your device slows down a bit, it doesn't seem like it's slowing down too much. You're trying to sync it with the frame likelihood very important. missing. It's given me an error.
Okay. Well, that would be given me a now facing it's not true. I'm going to put this There you go, that's fine. Now we can actually set up the animation for animation. And color equals color tween. And in here, really all we need to specify is to begin.
So that's just the starting colors on the color dot from RGB zero, you could choose a built in color, if you want to just do from RGB zero on say from Red from red, zero green, zero blue, a positive, I'll leave it as 1.0. So it's full capacity. Don't see why that wouldn't. Okay. Let me just continuing implement the rest of it in color from RGB zero We are going to change it to a blue color and opacity will be row one. Okay, yeah, we need to finish the rest of this off, so we need to we need to specify the controller.
Now we need to add a listener. So we're gonna say dot dot add listener. Now, in the listener, we are going to have a method and we all this is going to say is set state and that will update the state of our application should be at person Hold on. The last thing that remains in here is just put underscore controller and say dot forward. And that is it. So Doug Ford actually activate the animation tell the animation style so you could trigger this somewhere else.
I'm going to trigger it at the start. And what we are going to do is we have a container here, the container has a property called decoration. And for this we can do box decoration. And then we can say color. And we can set the color to the animation value. And this will return a hexadecimal value which can be assigned to color so we save this reload.
Okay, so that crashed. Lastly, just read. One thing to bear in mind with the animation and animation is trying to just do a hot reload a lot of the time does not work, you need to do a hot restart. When the application cross, I'm actually running the application from scratch. So it's built it it will All in the APK No. Just wait.
There we go. So let me restart that. So the background color, which is the container is initially set to red, nothing else not for the patentee, he changes to blue, and he animates between red and goes to purpley color blue. And there we go. That's what the animation tween is between animation, nothing much more to it than that. You can use this property wherever you want.
All you to do is implement a button so when you click it, it activates the animation. have maybe a nova button will have a slide up which you're able to you know change the value that will be really cool to mix in what you already don't also have it so we print out this animation value added is taken along over the duration of this If you have any questions, feel free to drop me a message. And as usual, I look forward to seeing you in the next video.