 This video we're going to start talking about transformations, and I do not mean the transformation that a caterpillar uses to turn into a butterfly, although it's actually very similar. A transformation is just taking an object and transforming it into something else using its properties. Alright, so there's different ways of doing this, and we're also going to introduce the concept of animations. Specifically in this video we're going to talk about the property animation, which takes a property and changes it over time. Whenever you see the word animation, it's just something changes over time, and they've got a few pretty decent examples, but I want to really drive this concept home. So let's just go here. Here's a good example. We have a simple rectangle, and when we click it, it's going to animate over here, and we click it again. It's going to animate over there. Let's see how we can accomplish this. First thing, let's give this an ID. Let's make a rectangle. Let's call that My Shape, and let's go ahead and say Color, Red, Width 100, Height 100. Let's say X, Y, and this is where we want to be a little bit careful here, because we don't want to set an anchor, or we may not actually be able to move that around. Remember when you throw an anchor down, it's just stuck there, so not always true. There's different caveats and different ways of doing that, so you've got to be a little bit careful. I'm going to say parent.height divided by 2, so we're looking for dead center here, and we're going to say height divided by 2, save and run. Let's see what this looks like, and it's right here. Nothing's happening because we haven't set up that mouse area or the animations yet. We're going to set up the animations. The property animation is a basic animation type. Animations can get very, very advanced, so we're not going to deep dive too much into animations. Save property animation. Notice how there's really no template to help us out, so we are left just to kind of dive through the documentation and figure out what they've done. So first things first, let's give this an ID. I call this animation right. Pretty self-explanatory name. It means it's going to move this to the right. Target. This is the object, or I should say the QML component that we're going to manipulate. We could, because this is a child of the rectangle, we could say parent. I'm going to actually give it the ID. It doesn't matter either way. I'm just giving it the ID in case somebody takes this copies and paste it outside of the rectangle. I like to keep things self-contained that way if I delete that rectangle, the animation is gone with it. Alright, so we have our target. Now we have the property. The property is, you guessed it, the property that we're going to animate. And this is one feature I hate. It's a string. So if you misspell, like if you were going to do width, but you misspelled width, it's just not going to work. So double check your spelling of whatever property you're going to use. And now we want to. There is a from property. We're not going to mess around with it too much. We're going to mess around with two, because we're going to take where it's currently at and move it to. So let's say root dot width minus my shape dot width. So we're going to say, move it to the right. So we're going to say the width all the way over to the right minus the shapes width. So it's not going to go off the screen. It's just going to stop once it hits that edge. Now we're going to take this guy and we want to be able to move it to the left. So we're going to do the exact opposite. Again, self-explanatory ID, target, property. Now we need the two. We can just simply say zero. Now remember an animation is something changes over time. Duration is something that we need to put in here. This is in milliseconds. So I'm going to say it's going to take half a second and half a second. If you want to change the speed, simply change that number. Remember milliseconds. So a full second would be 1000. Now almost done. We just need our mouse area here. And let's go ahead and fill that parent. And we want the on clicked. And let me get some screen real estate here so we can see what's going on. And we're going to say if my shape dot x is zero, then we need to figure out which animation we want. As the x position is zero, we're going to move this to the right. So we'll say animation right dot start. And we could say else. And here we want the animation left start. Now there is a property called running. So you could also do something like this running true. When in doubt, don't do that. It does something a little different than what you're thinking. It will actually kick off the animation and it will appear to work, but it's going to just continue to run and run. I have to put the caveat. Certain versions will just continue to run. Certain versions will stop. And you're going to start having some really unexpected behavior. So to recap, we have a rectangle. Two property animations. One's going to move to the right. One's going to move to the left. Both of them are going to take half a second. And they are triggered by the on click. Save and run. Here is our beautiful app. And we have that over time. Now remember, animation is changes over time. So we're going to make it go to the left over a second. And we're going to make it go to the right over, let's say, two seconds. So when we move to the right, it's two seconds. One one thousand, two one thousand. If we move to the left, it's one second. One one thousand. Pretty neat how that works. Some good takeaways from this video is property animation is just changing a property's value over time. Two will take it where it's currently from to a specific value. Typically leads are integers or doubles or something of that nature. And duration is the time duration it's going to take. What's up everybody? This is Brian. I hope you enjoyed this video. It's part of a larger series out on udemy.com called QML for Beginners. The QML for Beginners course assumes you know absolutely zero QML. You're just starting off and it's designed specifically for Q5. I will re-record the entire series when Qt6 comes out. And just know that it's over 100 videos and 13 and a half hours of video on demand. I'll put a link below so you can get a highly discounted rate. And before you dive in, just understand it covers a lot more than what I can put into this list. Everything from what's QML to animations to C++, integration, JavaScript, and on and on and on. But one of the requirements up front is you have to know Qt Core. You should have some C++ under your belt and be very familiar with Qt 5. In case you have none of that, I do have some courses for Qt Core Beginners. Intermediate and advanced out on udemy as well. Hope to see you there.