Objective-C iPhone Programming Lesson 7 - Moving and Animating

Hey guys, this is ma11 with our seventh iPhone programming tutorial. In this video, I'm going to be showing you how to animate things, uh, and how to move things, obviously, which is associated with that.

So this is like the first steps towards game creation. Basically, it's having things move around on the screen. In order to do that, you have to know how to move things on the screen without animating, and then use Apple's magic code for UI kit for animating things.

So we're going to create a new view-based application, and we'll call it "animation testing." For now, we're going to have an image view that we're going to be moving around, and an image view is just a UI image view. It's like a UI view, except we can have it display an image on the screen—an image file.

So let's have an IB Outlet, my image, and drag this image into resources. Check "copy" and click "okay." So we have an outlet. Let's also have an action; it says "do something." Okay, so let's go into this into our xib and set up all these things.

The essential part of what this app is going to do is we're going to have a button that says "do something," and we're going to have an image view that will be 200 by 200. Its image will be "pi." Okay, and let's outlet this my image and let's action this do something.

Okay, now we're going to write code. First, we're going to start out by moving this a little bit. So let's implement this method and move that thing around. It's not going to animate; it's just going to jump—is how I like to describe it.

So let's get our rectangle. All right, so basically there is a type of data called a rectangle, uh, it's CG rect. Basically, what that does is it represents—it has an XY coordinate, and it has a width and height value. So that way you can keep track of the width and height and the X and Y, and those are stored in origin and size.

What we're doing here is we're getting the CG rect, which is a structure, so it's a primitive C structure. You don't have to make it a pointer; we're getting the rectangle from my image. Okay, that's the first step. The next step is we're going to set the width to 100, so it's going to be half as big.

Now let's say re.all. What we're going to have to do is reset the frame of this because this is a pointer, so when we change this, it doesn't change the my image frame. We have to do that ourselves. So what we're doing here is getting the rectangle, setting the width, setting the height, and then setting the rectangle back the way it should be.

Now if we run it, let's just see. We're going to click "do something," and it's going to get smaller because we set the width and height to 100 instead of 200, which they were before.

Okay, so, uh, hopefully you get that part. So now what we're going to do is we're going to make this animate. Apple built something into their UI view that does this: see UI view set animation or begin animations, nail context null. Then you say UI view set animation duration, and you're going to set it to whatever amount of time in seconds. I'll do half a second, so 0.5 and I'll set, uh, I'll commit animations.

If you haven't done graphing in school yet, or outside of school, I guess, then you might not understand how the XY system works, but hopefully, you do. It's pretty straightforward. So if we run this, let's just see here. Do something—boom! Get smaller and animated.

I'll just point out right now that the XY starts from this corner, so this is 0, 0; this is like 320, 460. Whatever place this is, it's going to be a smaller number and a higher number anyway; it will animate to that.

The thing is that we're setting it to that same width and height every time, so we can say instead: do width equals—or how about times equals 1.2, which we'll multiply it by 1.2, making it slightly bigger every time, so it's going to get bigger now.

As you can see, it's getting larger, and it's going to be off our screen in a second because it's still stretched out. So let's just, um, I guess, it's a fine number. Basically, what you're doing here is you're multiplying the size by 1.2, and this code just makes it animate.

So yeah, that's pretty much it. Just to give you another example of what you can use animations for, if I'll comment this out, you can also use them for setting the transparency. So my image set Alpha to 0.5, and this will make it half. I'll set it to 0.1, and you'll see it fade out in 0.5 seconds.

There we go; it faded out, and now you can just barely see it. All right, so we can also, before the animation, say my image set Alpha 0.5, and now if we do this, it will go down, it'll go up and down, go up and down, go up and down, etc., etc., etc. If we hold it, it'll stay at 0.5, I guess.

Yeah, so that's basically how animations work. Anything between that—those code that these two blocks—basically anything between those will be animated that you do to a UI view, and they built that right in, so it's pretty cool.

You can also do other things with frames; this is just a preview of how to use frames. Another thing that's cool, if you don't want to have to use these frames to just move things around, you can say CG Point Center equals my image Center, and this will give you the center point of the image.

If you do lots of other things, if you use coco 2D, for instance, you deal with position as center. So you can say center.x equals 200. You can say center.x equals—what's 320 over 2? It's 160. And center.y equals 460 over 2, which is—oh my God—it's 230.

So there we go, um, and then you say my image set Center Center, and this will move it to the center of the screen, which it already is located at, so it won't change anything.

But yeah, so basically, that's how animations work. You can change this point just so you see if you set the center to some other point, it'll move it. So just moved it up, as you can see. So that is how, um, how animations kind of work.

Uh, there are other ways to do it that are more dynamic that you can control more. Uh, as you saw, like when you start a new animation, the previous animation dies and just immediately jumps to where it was going.

So, um, there are ways to do that dynamically so you don't have to deal with that, but this is the easiest way, and it's the least code to write, and it's the most understandable, in my opinion.

So this is what we're doing for now; this is the time it takes. Obviously, you can have multiple contexts—that's kind of complicated, so that's kind of how animation works.

I also showed you how to basically use UI image view—the basics of it. So next time, I'm going to be showing you how to do other ways of animation where you have a little more control.

Um, so anyway, thanks for watching. Macit want subscribe and goodbye.