Objective-C iPhone Programming Lesson 11 - CoreGraphics Animation

Hey guys, this is Mac, heads in Milan with our 11th iPhone programming tutorial. In this video, I'm going to be showing you how to make graphics that you draw with Core Graphics move around the screen.

So, I'm going to create a new project, going up to File, New Project in Xcode. Create a new application, view-based application, and I'll call it Core Graphics Animation.

Alright, and so basically what we're going to do is the same thing we did in the previous tutorial. We're going to create a new view, make it a subclass of... and I actually have to go to Cocoa Touch Class. Let me get a subclass of UIView and call it DrawView.

We'll go into the resources and make this our main view, like normal. So, what this view is going to do... and I'll get to it in a second, but I'll explain it now. There's going to be normal Core Graphics drawing, but it's going to be moving around pretty much live.

Ah, so I just clicked earset the class to DrawView, etc. You can watch my previous video if you want to know how to do that. Anyway, what's going to happen in DrawView? We're going to declare a few instance variables. We're going to declare a CGRect called previousBallRect or previousBall. How about just Ball? Why does it need to be previous?

And I'll make a float and I'll call it valX for velocity X, and okay, delY. We can use a CGPoint for this, but I don't want to use a CGPoint as a vector. I don't know. Anyway, basically, I create this and I'm going to create a function called moveBall.

Alright, so here's our initialization code right here. We can't actually write anything in our initialization code because this method might not get called. There are two initialization methods that get called, and if you declare your view through Interface Builder, then this will never actually get called.

It's quite sad, so we're going to make a separate function called void setupView, and we'll set everything up in a second. Alright, there's another function that gets called when a UIView is initialized. That's initWithCoder.

We'll say if self equals super initWithCoder, a decoder to self, and here we're going to do call setupView. Self setupView, and we'll do the same thing in our initWithFrame, just in case.

So, what you just saw there is me setting up our initialization code. So now, when this view gets loaded, it will call setupView. Here's where we're going to set the initial point of our ball, set the initial velocity of the ball, and set up a timer.

I'll display that in as I explain that in a second. So, save all equals CGRectMake, and I'll give it... I'll start out at 10, 10, 100, 100. So it's going to be 10 by 10, it's going to be at 10, 10, the point 10, 10. It's going to have a width of a hundred.

How you boundary? I'll make velX... I'll make it move by 2 and delY by 2. When we set the frame rate that this will go at, it basically means it'll move two pixels per frame.

Alright, so that's pretty much what we're going to do now. In order to make... we're gonna have code— we're going to have moveBall specifically get called every thirtieth of a second or something like that, so that way we can animate and redraw, which will basically move the ball slightly if the velocity needs to get changed.

Then set me draw in our redrawing function and our drawRect; we're going to draw a ball like normal.

So, declare CGContext right context equals UIGraphicsGetCurrentContext, and we'll say CGContextSetFillColor... context. How about set teal color with color, and I'll give it UIColor yellow color.

CGColor. Alright, so now we can say CGContextFillRect... or how about FillEllipseInRect(context) and we'll give it our ball's rectangle.

Alright, so basically when this gets called, it'll draw an ellipse, a yellow ellipse, in the designated frame. So all we need to do now is make moveBall move the ball slightly and make it get called.

So, in our setupView, we set up the velocity in the ball frame. We're also going to set up a timer. We're going to say NSTimer scheduledTimerWithTimeInterval, and I'll give it 1.0 F over 30.0 F. That basically means one thirtieth of a second is our time interval, so it'll go 30 times a second.

Target will be self, selector: that selector, and we'll give it our moveBall selector. UserInfo will be nil, and repeats will be YES because we want it to go over.

So, I'm going to go over what this does real quickly; the scheduledTimerWithTimeInterval, the first parameter is not how many times the second it should go, but how many seconds it will take for each tick, so in one thirtieth of a second, it'll tick 1 over 30 right there.

So basically, that's our interval. If you gave it 30, then it would go every 30 seconds. That would be kind of slow.

Anyway, the target is going to be self. That means it's calling this selector on self. The selector just means I want to create a selector, and a selector is kind of complicated; I can't explain in this video, but basically this is how you tell it.

I want you to call the function moveBall. UserInfo is something you get as a parameter if you want, but we're not doing that. And repeats; we'll set that to YES because we want it to repeat.

This function actually returns an NSTimer object, but we're not going to be dealing with that. We're not going to be stopping it or anything, and we'll be doing that in our next tutorial, actually, so I don't want to spoil that.

But yeah, so we've got this set up, got our velocity. Now we moveBall, and at the end of it, we'll say setNeedsDisplay. That means I want to redraw, and I'll explain that in a second.

Like here, we'll say ball.origin.x plus equals valX, and ball.origin.y plus equals delY. That'll move it by velocity so to move it in— with the slope.

And I'll move it down too, across to... so it will be negative one will be the slope that the ball is moving at. Now, when we say self.setNeedsDisplay, that just means I want you to call CGRect drawRect. You know, drawRect again, and so this will get called again sometime in the near future after we call this normally on the next instance of the run loop.

Right? So we're adding to the velocity. Now here's the thing; the ball is going to move off of our screen, and I want you to see that before I go on.

So I'll run this, make sure it runs at the iPhone simulator... it will see. Alright, so for some reason, it's the iPhone 4 simulator, but as you can see, there's a ball, and it just went off our screen, and we can no longer see it; it's still moving.

So what we're going to do is change around our velocity as the thing moves around. So basically, we're going to show if it goes over the side, then reverse the velocity of the side it went over.

So we're going to say if ball.origin.x less than 0, then we'll say velX equals negative 1, and we'll also say ball.origin.x equals 0 just to make it so it never actually goes off the screen.

And we'll say if ball.origin.x greater than self.bounds.size.width - ball.size.width, then we'll say velX equals negative 1, ball.origin.x equals self.bounds.size.width - ball.size.width.

If you guys can look and see what this means— we're basically taking, we want to set the ball so it's just touching. The right side of our view is this, on the x-axis— we're subtracting the width of the ball from that to get the X that we want the ball to have.

So I hope you can see the way that works. If not, maybe you can draw it out; it'll probably help a little bit. So that'll make it bounce on our x-axis.

So if you take a look, if you run it, it'll go... and let's see, it bounces off the right, but it's still going to go down across the bottom, so we need also to do the y-axis for this.

So we can do this basically the same thing and replace it with width height and y or x with y, so I'll do that right now.

Alright, and I think you could— I won't cut this because I want you to see the process I'm going through; it's pretty straightforward.

Alright, and we run this, and now you should see a ball. Let's see, and I want to talk too soon— maybe it doesn't work at all.

Yeah, it works! So you should now... the ball will bounce across all the axes on all the edges, and it will just reverse the velocity.

So that's basic animation using a timer to make it go faster. I'll change my velocity from 2 to 4. Now I'm making it go twice as fast as a big guest, and let's see how well it works.

It's going pretty fast, so now you kind of can understand. I hope you can see how animation works.

Now, this is a lot of code; I don't expect you to necessarily want to copy it all down from the video. If you want to, that's fine, but in the description, you'll have a link to download the code for this.

So go ahead and click on that. Anyway, thanks for watching. Mac out! Little unsubscribe, and goodbye.