Hopping animation with UIView CommitAnimations?

[justill45]

ok, so im trying to make a image do a hopping motion by animating wit UIView. Heres what i have so far:

[UIView beginAnimations:@"Move Puppy" context:nil];
	[UIView setAnimationDelegate:self];
	[UIView setAnimationDuration:speed];
	
	
	image.center = CGPointMake(image.center.x - 10, image.center.y - 10);
	
	[UIView commitAnimations];

This will work for making the image go up and to the left, but how do i get it to go back don and to the left?

[Picoman]

Have you tried putting YES instead of TRUE?
The docs use YES/NO for setAnimationRepeatAutoreverses.

[justill45]

Originally Posted by Picoman

Have you tried putting YES instead of TRUE?
The docs use YES/NO for setAnimationRepeatAutoreverses.

oops, i didnt even mean to put that in there, even if it did autoreverse, it would just go back to the original position.

[MiniRobinho]

Do you want it to just jump up and down as if there's no friction i.e. it bounces up and down at the same height throughout? If so, then based on the level of the table it's bouncing off, set the y velocity to negate whenever it the bottom level's y value, and when it hits 'near' where you want it to start going down, the y velocity continues to go down until it's negative of what it was going up

Bit complicated to write, read it a few times if you must

[justill45]

Originally Posted by MiniRobinho

Do you want it to just jump up and down as if there's no friction i.e. it bounces up and down at the same height throughout? If so, then based on the level of the table it's bouncing off, set the y velocity to negate whenever it the bottom level's y value, and when it hits 'near' where you want it to start going down, the y velocity continues to go down until it's negative of what it was going up

Bit complicated to write, read it a few times if you must

so in simpler terms are you saying that when it hits the bottom of where you want it, make it go up, and when you hit the top, make it go down?


how would i do something like this?

[MiniRobinho]

Originally Posted by justill45

so in simpler terms are you saying that when it hits the bottom of where you want it, make it go up, and when you hit the top, make it go down?


how would i do something like this?

Not quite, because when it bounces at the bottom it goes straight back up doesn't it? But when it goes up it doesn't suddenly go down at the same angle, it slowly stops going up and starts going down.

What you want to do is (note that I'm considering the ball center is the normal ball center):

//When the ball is touching the bottom of the ground, y velocity inverses
if(image.center.y - ballRadius == ground.y) {
ballVelocity.y = -ballVelocity.y;
}

//When ball is more 50 pixels off the ground, it starts to slow down and go down
if(image.center.y - ballRadius - 50 > ground.y) {
ballVelocity.y = ballVelocity.y - (image.center.y - ballRadius - 50 - ground.y)
}

What I've done in the second part is make the ballVelocity.y go down by the amount of difference between its current height and 50 pixels above the ground. This should work however I'm not sure how quick it updates so it might keep updating so quickly that it immediately goes down. You're gonna have to check this

[justill45]

Originally Posted by MiniRobinho

Not quite, because when it bounces at the bottom it goes straight back up doesn't it? But when it goes up it doesn't suddenly go down at the same angle, it slowly stops going up and starts going down.

What you want to do is (note that I'm considering the ball center is the normal ball center):

//When the ball is touching the bottom of the ground, y velocity inverses
if(image.center.y - ballRadius == ground.y) {
ballVelocity.y = -ballVelocity.y;
}

//When ball is more 50 pixels off the ground, it starts to slow down and go down
if(image.center.y - ballRadius - 50 > ground.y) {
ballVelocity.y = ballVelocity.y - (image.center.y - ballRadius - 50 - ground.y)
}

What I've done in the second part is make the ballVelocity.y go down by the amount of difference between its current height and 50 pixels above the ground. This should work however I'm not sure how quick it updates so it might keep updating so quickly that it immediately goes down. You're gonna have to check this

i could make a new timer, how fast of a timer would work well with this?

[MiniRobinho]

Originally Posted by justill45

i could make a new timer, how fast of a timer would work well with this?

I don't have a clue, test yourself You don't really need to ask that question do you? Just put in a value and see how it works. Best to start with a slow timer so that it's obvious whether it's working, then bring the time down as you see necessary.

[Shmoopi]

Originally Posted by justill45

ok, so im trying to make a image do a hopping motion by animating wit UIView. Heres what i have so far:

[UIView beginAnimations:@"Move Puppy" context:nil];
	[UIView setAnimationDelegate:self];
	[UIView setAnimationDuration:speed];
	
	
	image.center = CGPointMake(image.center.x - 10, image.center.y - 10);
	
	[UIView commitAnimations];

This will work for making the image go up and to the left, but how do i get it to go back down and to the left?

What I would do is simply reverse the image movement so it goes up and down over the timer in the animation. Something like this:

[UIView beginAnimations:@"Move Puppy" context:nil];
	[UIView setAnimationDelegate:self];
	[UIView setAnimationDuration:speed];
	
	
	image.center = CGPointMake(image.center.x - 10, image.center.y - 10);
        image.center = CGPointMake(image.center.x + 10, image.center.y + 10);
	
	[UIView commitAnimations];

[justill45]

Originally Posted by Shmoopi

What I would do is simply reverse the image movement so it goes up and down over the timer in the animation. Something like this:

[UIView beginAnimations:@"Move Puppy" context:nil];
	[UIView setAnimationDelegate:self];
	[UIView setAnimationDuration:speed];
	
	
	image.center = CGPointMake(image.center.x - 10, image.center.y - 10);
        image.center = CGPointMake(image.center.x + 10, image.center.y + 10);
	
	[UIView commitAnimations];

UIView animates everything at the same time, that code would make nothing happen since they cancel eachother out

[Shmoopi]

Originally Posted by justill45

UIView animates everything at the same time, that code would make nothing happen since they cancel eachother out

Haha, good point. Guess I'm just a little off my game today. But you could put the reverse into the animationdidfinish method if that's what you wanted.

[Shmoopi]

Maybe something like this:

        *Add this to your "Move Puppy" Animation:
        [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];

- (void)animationDidStop:(NSString*)animationID finished:(BOOL)finished context:(void *)context {
	if (animationID == @"Move Puppy") {
		[UIView beginAnimations:@"Move Puppy Back" context:nil];
		[UIView setAnimationDelegate:self];
		[UIView setAnimationDuration:1.0];
		
		image.center = CGPointMake(image.center.x + 10, image.center.y + 10);
		
		[UIView commitAnimations];
	}
}

[MiniRobinho]

Originally Posted by Shmoopi

Maybe something like this:

        *Add this to your "Move Puppy" Animation:
        [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];

- (void)animationDidStop:(NSString*)animationID finished:(BOOL)finished context:(void *)context {
	if (animationID == @"Move Puppy") {
		[UIView beginAnimations:@"Move Puppy Back" context:nil];
		[UIView setAnimationDelegate:self];
		[UIView setAnimationDuration:1.0];
		
		image.center = CGPointMake(image.center.x + 10, image.center.y + 10);
		
		[UIView commitAnimations];
	}
}

He doesn't want to go forwards and then back to its original place, he wants it to hop, so constantly go forward, so the image.center.y value (seeing as it seems hes working in LandscapeLeft so y value is horizontal) should stay as -10 in the second animation too, and only image.center.x go to +10. However that would make it only move in diagonals whereas slowly changing the x value will make it look more like a hop.

I just realised you're still trying to do it through UIView animations. I think for the transition stage you need to have set where there is some sort of ballVelocity.y set so that you can make it look more realistic by going up then slowing down and coming back down again.

[justill45]

Originally Posted by MiniRobinho

He doesn't want to go forwards and then back to its original place, he wants it to hop, so constantly go forward, so the image.center.y value (seeing as it seems hes working in LandscapeLeft so y value is horizontal) should stay as -10 in the second animation too, and only image.center.x go to +10. However that would make it only move in diagonals whereas slowly changing the x value will make it look more like a hop.

I just realised you're still trying to do it through UIView animations. I think for the transition stage you need to have set where there is some sort of ballVelocity.y set so that you can make it look more realistic by going up then slowing down and coming back down again.

hmm, im really not sure how to do that though