PDA

View Full Version : Slide a UIView...




ArtOfWarfare
Aug 20, 2008, 03:32 PM
Rather than just move a UIView, I want to have it slide from the first spot to the second. I see the property center for moving views... and I see a bunch of different functions related to animating the views... but I can't understand the lingo...

Begins an animation block.
What's an "animation block"?

Edit: Oh... and I guess I need help with CGPoints too...

I just found out my code for moving the center doesn't work anyways.

marker.center = (CGPoint *) (160, 62);
error: incompatible type for argument 1 of 'setCenter:'

marker is a UIImageView (subclass of UIView which has the property center)... it expects me to give it a CGPoint. I tried adding a cast but that didn't do anything.

Oh and hey! Somehow I overlooked that line... it confirms my suspicion that beginAnimation: context is how I get it to slide from one point to another. Unfortunately I still have no idea what I'm supposed to give it (what's an animationID?)

2X Edit: Uhhh... wait... I'll just read this document to figure out how to get it to animate right:
http://developer.apple.com/documentation/Cocoa/Conceptual/AnimationGuide/Articles/TimingAnimations.html#//apple_ref/doc/uid/TP40003581

I still need help with the CGPoint thing though...

3X Edit:

OK, I've got this now:

CGPoint p;
p.x = 160;
p.y = 62;
marker.center = p;

It seems a bit overly complicated... it really seems like this should all be able to be summed up in one line of code like I had... but at least it works.

I still don't understand how to have it slide though (even after having read that document...)

but I found this which appears to be exactly what I want:

http://developer.apple.com/documentation/Cocoa/Conceptual/CoreAnimation_guide/Articles/Headstart.html



Taum
Aug 20, 2008, 05:58 PM
marker.center = (CGPoint *) (160, 62);
No offense, but this is not even valid C code AFAIK :rolleyes:

CGPoint p;
p.x = 160;
p.y = 62;
marker.center = p;

It seems a bit overly complicated... it really seems like this should all be able to be summed up in one line of code

Ideally, looking up "CGPoint" in the doc sets should have brought you to :
marker.center = CGPointMake(160, 62);

Beware though if you ever need to create a NSPoint in the same way, for a reason that eludes me it is NSMakePoint(), not NSPointMake().
It seems that CG has CGFooMake() functions and NS has NSMakeFoo() functions ...

ArtOfWarfare
Aug 20, 2008, 06:47 PM
Thanks... condenses the code a bit which is always nice.

But even after reading both those documents I still don't get how to animate the movement.

... Maybe actually making a project and copying all their code shown in the second document and compiling (and then tweaking) it will help me understand?

kainjow
Aug 20, 2008, 06:52 PM
That link above points to NSAnimation, but that doesn't exist on the iPhone (only Mac OS X).

To get started animating views you need to use the UIView method beginAnimations:context:. Look at its documentation for the other methods involved.

You can also use Core Animation directly. See ViewTransitions (http://developer.apple.com/iphone/library/samplecode/ViewTransitions/index.html).

ArtOfWarfare
Aug 21, 2008, 10:15 AM
mmm... that still doesn't seem to be what I want.

Here's something I tried... I like the results.

Whenever I want it to move, I set a int variable called targetX to wherever I want the center to be. I also have a int variable called currentX which should be where the center currently is.

Since I already have a NSTimer that fires every 0.01 seconds (it runs a countdown timer for the game,) I just used that same thing and added this:

currentX = ((currentX + targetX) / 2);
marker.center = CGPointMake ((currentX), 62);

while good, it seemed a bit faster than I wanted... so I changed it so every millisecond it went 1/8th of the distance between the currentX and the targetX.



currentX = (((currentX * 7) + targetX) /8);
marker.center = CGPointMake ((currentX), 62);

while it may not be as flexible as Core Animation, it gets the job done in very few lines of code. I think I might be able to make it even fewer if rather than me telling it where exactly targetX should be, it finds out by using another variable I already have called currentTurn is...

Edit: And now I've done that.

currentX = (((currentX * 7) + ((currentTurn * 110) - 60)) / 8);
marker.center = CGPointMake ((currentX), 62);

I also fixed the problem of it not going far enough by changing currentX to be a float value rather than a integer. I can't help but wonder if this is going to cause issues with battery life or something though... I'm making it calculate a float value again 100 times a second even if it's not going to move anywhere.

Does the fact that my game's interface is almost all white on black? (Does having a black background instead of white save some battery power?)

Or should I not worry about battery life at all...

I don't think I will. I'll focus on making code that gets the job done... and hopefully does it in a fashion that I can easily reuse it in other programs or fix it later if problems come up.

Luke Redpath
Aug 22, 2008, 09:10 AM
Given a view (UIWindow maybe) where you have one subview and you want to transition to another subview, you should be able to do something like this:


// start an animation block
[UIView beginAnimations:@"myAnimationID" context:nil];

// configure your animation using a nice flip transition
[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight forView: window cache: YES];

// swap your views
// say you already have two subviews with the current one on top
// you can just swap them around
[[window.subviews objectAtIndex: 0] sendSubviewToBack];

// do it!
[UIView commitAnimations];


So that's how animation blocks work. See the UIView docs for more information about animations.

The problem is that currently the SDK only ships with preset transitions for flipping and page curling. There is no slide transition which is strange, so you might have to get down and dirty with the lower level CoreAnimation code, which I'm still learning so I'd love to help, but can't.

Incidentally I want to do this myself so if I work it out I'll post here again.

ArtOfWarfare
Aug 22, 2008, 09:50 AM
I don't want a transition though!

I have an image at one point on the screen. I want it to slide it sideways to another point on the screen. This code did it just fine:

currentX = (((currentX * 7) + ((currentTurn * 110) - 60)) / 8);
marker.center = CGPointMake ((currentX), 62);

currentX is the point on the screen where my image (which I named marker,) should be right now. ((currentTurn * 110) - 60) is where I want it to be in a few milliseconds. Every 0.01 seconds it'll move the image 1/8th of the distance between where it is right now and where it should be in a few milliseconds.

If you have some advice for more easily doing something like this, please tell. Everything you guys keep telling me is about how to replace one image with another.

I'm going to put this in terms of Keynote 4 since I think it's the best way to explain it...

You can build objects in and out. That's what you keep explaining how to do. What I want to do is give the object an action. I want it to over time, change it's position on the screen.

It's meant to be a subtle hint to the people playing my game that it's just changed whose turn it currently is.