 Hey everybody, this is Brian. Welcome to the 148th Qt tutorial with, and I normally say C++, but we're going to say QML because people have been bashing me about that a little bit. Well, not really bashing me. We've been doing QML and not C++, so we are going to get back to doing C++. I'm eventually going to merge the two together because QML is really run by C++ under the hood, but we're not there yet. We're going to get there. We're going to make a new project. We're going to go QQ Quick Application. I need a good name. I'm horrible with names. It's called Funky Town. I heard that song on the way back from work, and it's just been stuck in my head. One way to Funky Town. Anyways, don't judge me. We're going to go out and delete this main form, because we really don't need it, so we're going to remove that. We're going to get rid of this little guy here. Let's say ID root, and let's say width 500, height 500. What we're going to cover today is multiple animations at the same time. If you've kind of been a good boy or girl, you've been reading up on what's called parallel animation and sequential animation. The difference between these two is parallel animation allows you to animate in parallel, meaning they will run at the exact same time, where sequential is one after another. They're pretty self-explanatory. We're not really going to be going over those, but you need to understand those concepts in case this tutorial just does not work for you, then you're going to have to read up on these. I believe in the newest version, parallel animation is by default. We're going to do a bunch of animations, and they should all run at the exact same time. If they don't, then you'll need to look up sequential animation and just simply embed all the elements in a sequential animation item. Just understand that those concepts exist. We're going to go dive right in here. I'm going to say rectangle. I'm going to say ID, the ever-present box, width 50, height 50, and color. I got a headache because I ran today. I did actually figure out color 500 in real smart there, Brian. I did actually figure out why I get headaches. This is simply dehydration. I just don't drink enough water. I don't know what you call him. The gym supervisor, the gym fitness instructor. He's not really an instructor. He just hangs out and helps people. The gym janitor, whatever his name is, Sam. I call him Sam. Anyway, Sam basically looked at me kind of like, you don't drink enough water? Are you stupid? I felt kind of dumb. So I really try to keep my water intake going. But anyways, we're going to say number animation on X. I think we've done this before where we're just going to move an object. There are two types of people in this world. People that like the bracket up here and people that don't. I personally don't. I get kind of fidgety if it's not where I want it. 200, 500, and we're going to say duration. We're going to give this a 10 second duration. So what we're doing here is number animation on X. What we're saying is this rectangle, when the X is changed, which is changed automatically when it's created, so it'll kick off. So on X, we're going to go to 500. So X is going to be set to 500 over a period of 10 seconds. Let's just save and run this. You can see there's our little green rectangle going across the top. And it'll take 10 seconds to go over. And it should stop because it hit the width here. There it stopped. Something we should actually do here is instead of 200, 500, let's say root.width. That way it's going to be the window width rather than just 500. So if your window is a different size, it'll actually work. Now through the magic of copy and paste, we're going to grab this. We're going to change that to Y and we're going to change this to height. And now we've got two animations at once. So what's really going on here is these should run in parallel. If they run sequentially, you'll see it go horizontally across the top and then it'll drop down to the screen. Actually, you probably won't see it because it'll be off the edge. If it's doing that, you've got an older version acute. So I think the newest version does parallel animation. So let's run this and you should see there it goes in parallel. It's going down. So we're just going to play around with this a little bit and see just a little bit how creative we can get. And it should stop right there because we hit the width and the height. Sure enough, there it is. So while I'm typing away, I'm just going to kind of chat with you a little bit here. We're going to make some rotation. Let me know how my voice sounds. I got a new headset because my other one was kind of like tweaking me out a little bit and I was getting a little frustrated with it. I know that some of you listen to closed caption and you have it auto translate into other languages. Where's this? Where's that? Well, where's this? We'll see. I think we got one too many. There we go. So if the sound quality is better or worse, I try to cater to a lot of people, especially if English isn't your primary language because I understand that you're listening to me through a translation. I shouldn't say listening. You're reading my voice from a translator and sometimes things just get kind of garbled up. So we're going to rotate this from 0 to 360 for a duration of, let's say one second, loops, animation infinite. So we've done this before, right? In our last tutorial, we rotated something. What I'm demonstrating here is that these don't have to line up. You see how this is 10 seconds long? This is 10 seconds, but this is only a second. Think of this like when you're in a movie editor. You have a timeline at the bottom. The master timeline is always infinite, and we've got an item that's going on X, an item going on Y, and an item that's going on rotation. So this will actually rotate once a second. So this will rotate 10 times, but it's infinite. So it's just going to keep going and going, but you'll see it on the screen. So we're going to run this. And sure enough, it's doing all three of those at the same time. Now it'll go down to the width and height, and it'll just keep going, at least on the rotation. You see that's still rotating down there. Because that animation has its own timeline, it's going to be infinitely rotating. I guess the main concept we're trying to drive home here is that you can really get kind of creative with all these things. So we're going to say color animation, because why not? We're going to go from green, if I can spell green, to red. And let's do a eight second animation. And you notice how you got other things like started, stop, states. We're going to get into some of those. I just want you to be aware that these things exist, because what we're really doing is we're altering the states of these objects. So the color animation is going to have its own timeline. It's going to go from green to red over a period of eight seconds. So we're going to just save and run. You'll see it goes green. Maybe it doesn't. Why did it not do that? Oh, probably because we didn't give it an on. On color. There we go. And you'll see it starts turning from green to kind of a puke brown into a red. The reason why I did eight seconds instead of the 10 is so that you would see it actually turn red. Otherwise, it would still be kind of brownish right here. So these are called internal animations, meaning they're internal to this item right here. You can also do an external. And we're going to kind of do one of those real quick here. And we're going to do a number animation. And let's get some space here so we can see what's going on. And we're going to say ID and an opace. And we're going to say target. We're going to say the target is box. Now where are we getting box from? That's what we named our rectangle, the omnipresent box. So our target is box. And we're going to say running equal true. We're going to actually start that. We're going to say from. Now remember opacity goes from 0.0 to 1.0. We could have just said zero. Just, you know, inside knowledge there. And so basically we're going to go from nothing to full. And actually let's reverse that. Why not? Let's go from full to nothing. It's already going to be visible. And we're going to say duration. Let's say a thousand meaning one second and loops animation infinite. So what we're really doing here is we're saying we're going to take our number animation. We're going to kind of bind it to this box up here. And we're really just kind of playing around with this thing. We did forget something. If we run that as it's not going to go, what we need to do is bind it to the property. That's why I was kind of pausing real quick here. Properties, opacity. Did I spell that right? Opacity. Let's just copy and paste just to be safe. Yeah, of course I spelled it wrong. Now we run it. You'll see how it kind of fades in and out while it's changing colors. It's kind of a trippy effect. And because that was, I believe, infinite, it'll just keep doing it in and out, in and out, in and out. So that's kind of an example of an external animation. It doesn't have to be embedded in the object itself. So what a lot of people do is they'll have a base object, like our rectangle here. And they'll have the default animation in there. But then you'll have events like mouse click or something or a keyboard click. And then you'll bind animations and turn them on and off through the running. So that's kind of an example of, I want to say, parallel animation and multiple animations stacked upon each other. So that's it for this tutorial. If you found this helpful or entertaining or if you really don't care either way, visit voidrupts.com for the source code for this tutorial and all others. Just go to language and then cute. And it'll be way at the end. And also, there is a Voidrums Facebook group. We just got over 500 developers in this group. And it's not just cute and QML. We got Python, C-sharp, .NET, Ruby, Rails, embedded. I mean, pretty much all sorts of people from every walks of life. We all just kind of hang out there and help each other out. So if you have a question or a comment, go ahead and join the group. We try to get people in there very quickly. I think the longest somebody has waited is maybe two hours. But usually we get them in within like five minutes. And it's just an open community. You can post your questions and usually people jump in and help out.