Invalidating animations after you make a change
As you start to create more and more complex animations, you might want to change the origin of a property that is in the animation. In other words, you might want to change the vars that define the animations positions. In a case such as this one, you will want to refresh the logic inside of the animation and to do that, you will use the method invalidate. In this lesson, we will learn how and when to use the invalidate method.
Video Transcript
00:00Our chapter 3 screen was getting overfilled, so I moved us to chapter 3b,
00:04and I grabbed our last animation that we've created and kind of got rid of everything
00:09else beyond that, so we still have that animation. Let me just put it right here on the center of
00:13our screen. So we have our animation, it goes cycles once, and it terminates. So what I want
00:19to do next is I want to create, I want to, first of all, I want to restart this animation over and
00:25over. How about, let's start from there. So let me start by adding here an onComplete method,
00:31callback that is, and I'm going to call the, let's say we will call our onComplete restart.
00:40And I'm going to send to it a param as always, onComplete params, and I'm going to send to it
00:46the param of itself, of the actual tween. And that's it. So let's create that function.
00:55Let me just copy that name because it's way too long.
01:00And we have our tween. So all we really, if we really want to just restart as soon as
01:07animation completes, all we have to do is just call that tween and ask it to restart.
01:12Simple, easy, very simple. And once we do that, it will just go on and on and on and on forever,
01:18only this time without the delay. The delay happened only once. So if we wanted to create
01:23another delay, we could have added here before this restart, we could have called a slight delay
01:28by using the tween light delayed call. And we could say we want to put here a delay of let's say
01:38math dot random times one. So it's going to be between zero and one seconds. And we'll call
01:44that function the two restart. And if we do that, then we'll have your slight delay each time
01:49between zero and one second. So it's going to be a little bit different each time.
01:53Now, what I really want to do is I want to change that starting position. So even as soon as the
02:00starts, I want to position our item somewhere on the stage. For example, let's say I want to take
02:05our item, which I could find by going to my target, and I want to change its x position.
02:11And I'm going to go to my stage stage with I'm going to duplicate that by math dot random.
02:18So I'm going to position my x somewhere randomly on the stage. Now, because my
02:22width had become has turned to zero in the end of this animation. So I want to also set my width. So
02:28I'm going to go there to my target width, and I'm going to go to stage state, not stage, I'm going
02:34to put your math random. And I'm going to just duplicate it by 300, let's say and create a random
02:41width to our element. So what I'm hoping is the animation completes, it's going to position itself
02:47somewhere on our screen. Now our problem is, as you can see, our animation starts from the beginning,
02:53because of the initial properties of our animation, let me stop there, because it's really giving me
02:58a headache. It's starting from the initial position of where it was ignoring the override
03:05that we just did, because it's actually calling restart the animation restarting from its initial
03:09positions. So what I want to do next is I want to tell my T my tween, I want to tell it to
03:15invalidate. And if I tell it to invalidate, what I'm basically saying is ignore the starting
03:20positions that you have, use whatever position I'm in right now, and take me from where I am
03:25right now to where I'm going to be to the to the actual values that I have inside there. So if I
03:31run this one more time, we'll see that this time around, it's going to not start over from the
03:36beginning, but it's going to take us from the position that we were last in. Now, obviously,
03:41this is not as pretty as we would want it to be. But what we might this delay, obviously,
03:48is a little bit extreme, we don't really even need the delay. So we could just even get rid of this
03:53delay. So I'm just gonna get rid of the delay, and instead of that, just call the T restart
03:58immediately. And this time around, it's gonna look a little bit better for me, it's a little
04:04bit kind of a creative kind of lines going through, I personally would love this to be
04:08also faded out at some point, kind of like maybe faded out and going in to be faded in.
04:14So what I'm going to do, I'll just add another property that we're going to configure, I'm just
04:18going to add your alpha, set it to one, which by default in the beginning was already one,
04:22so it's not going to do anything. But in this case, now I'm going to come here to my t.target,
04:27and I'm going to set my alpha to, let's say, zero dot one. So it's going to be from
04:31really low value, and it's going to go up to full value as it's exiting the screen.
04:37So let's see how that goes from the second round onwards. Beautiful, love it.
04:41Okay, so that's it. So that's about invalidate. And that's all we have to talk about invalidate
04:46and restart. And we could see how they work. Next, the next lesson is going to be our last
04:54of chapter three, where we'll wrap up the basics, functions and operations of tween light.