September 19, 2010 0

Post-A-Day #3 – Flipping Views

By admin in Uncategorized

In my current project, I needed to pretend my object had a front view and a back view.
Like a baseball card for example.

Design often mirrors real life, so it’s a common graphic design idea.
Post-A-Day are pretty tough so i have less time to write my thoughts more eloquently, however…


Iphone animation blocks are insanely awesome, and well worth writing in detail. Something which I will do in more detail later as a follow up.

Notes on this effect/iphone-animation:

  • Consider what anything after “[UIView beginAnimations:context:]” to be 1 single unified block.
  • Animations can be named (using an NSString), so you can refer to them later
  • Context is a void object, this is where you can pass info, that your callbacks will receive later
  • Everything that until “[UIView commitAnimations]” happens, basically in the sequence it was written. Yes, that includes regular code (as shown in below)


In order for this animation to work, both views must be in the same subview.
In my example I have a container in my UIViewController, that houses these two views.

-(void) flipPages:(id)sender
{
 
	[UIView beginAnimations:@"flipAnimation" context:NULL]; // a name for this animation, can be nil.
	[UIView setAnimationDuration:0.75f]; // in seconds
 
        // Here i'm just figuring out which animation to use
       //  Use flipFromLeft to go to the back, and flipFromRight to go back to the front
       //  I do this, but checking if frontView has a superView, if it does then its the one showing
	UIViewAnimationTransition flipType = ([self._frontView superview]) ? UIViewAnimationTransitionFlipFromLeft : UIViewAnimationTransitionFlipFromRight;
 
	// Flip those views!
	[UIView setAnimationTransition:flipType forView:self cache:YES];
 
	// Amazingly this code will happen mid animation!!!!
	if ([_backView superview]) // if back view is visible, then im flipping to the front. Remove back view.
	{
		[self._backView removeFromSuperview];
		[self addSubview:_frontView];
	}
	else // Otherwise we're moving Front-To-Back, remove the frontView
	{ 
		[self._frontView removeFromSuperview];
		[self addSubview:_backView];
	}
        // Set it and forget it.
	[UIView commitAnimations];
}

Tags:

Leave a Reply

Powered by WP Hashcash

Spam protection by WP Captcha-Free