Animating UIViews to get crossfade effect not working very well - iphone

Question

I have successfully created a icon menu that displays from a tabBar selection. You can view this menu in either Portrait or Landscape.
because of the space on the screen I have made it so that in portrait you can view 4x4 icons.. however due to sizing when viewed in landscape this dose not work that well.. so I have made it so that you can view 2 rows of 6 and 1 row of 4. because of this, I have decided to create two UIViews for the menu, when the device rotates I switch between the two views.
i.e. if Portrait current and device is rotated load Landscape and unload Portrait and vice versa.
This is the code I am using to change views on the device rotation, this works perfectly fine (might not be the best code but its the best I could do)
if ([[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationPortrait)
{
if([jumpBarContainerLandscape superview])
{
// Device is changing from landscape to protrait change views to fit
// load landscape view
jumpBarContainerPortrait = [[UIView alloc] initWithFrame:CGRectMake(0.0, (367 - jumpBarHeightPortrait), 320.0, (jumpBarHeightPortrait + 49.0))];
jumpBarContainerPortrait.backgroundColor = [UIColor scrollViewTexturedBackgroundColor];
jumpBarContainerPortrait.alpha = 0.0;
// add jumpbar container to view
[self.view insertSubview:jumpBarContainerPortrait belowSubview:actionTabBar];
[UIView animateWithDuration:0.2
delay:0.0f
options:UIViewAnimationCurveEaseIn
animations:^{
jumpBarContainerLandscape.alpha = 0.0;
} completion:^(BOOL finished) {
if (finished) {
}
}];
[UIView animateWithDuration:0.2
delay:0.0f
options:UIViewAnimationCurveEaseIn
animations:^{
jumpBarContainerPortrait.alpha = 1.0;
} completion:^(BOOL finished) {
if (finished) {
// remove subView for superView
[jumpBarContainerLandscape removeFromSuperview];
}
}];
}
}
else if ([[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeLeft || [[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeRight)
{
if ([jumpBarContainerPortrait superview])
{
// Device is changing from portrait to landscape change views to fit
// load landscape view
jumpBarContainerLandscape = [[UIView alloc] initWithFrame:CGRectMake(0.0, (207 - jumpBarHeightLandscape), 480.0, (jumpBarHeightLandscape + 49.0))];
jumpBarContainerLandscape.backgroundColor = [UIColor scrollViewTexturedBackgroundColor];
jumpBarContainerLandscape.alpha = 0.0;
// add jumpbar container to view
[self.view insertSubview:jumpBarContainerLandscape belowSubview:actionTabBar];
// fade out
[UIView animateWithDuration:0.2
delay:0.0f
options:UIViewAnimationCurveEaseIn
animations:^{
jumpBarContainerPortrait.alpha = 0.0;
} completion:^(BOOL finished) {
if (finished) {
}
}];
// fade in
[UIView animateWithDuration:0.2
delay:0.0f
options:UIViewAnimationCurveEaseIn
animations:^{
jumpBarContainerLandscape.alpha = 1.0;
} completion:^(BOOL finished) {
if (finished) {
// remove subView for superView
[jumpBarContainerPortrait removeFromSuperview];
}
}];
}
}
Now the issue I am having is that the animation between the two UIViews is quite ugly, its not very smooth you can see the two different views on the animation etc which is undesirable.. I was wondering if anyone could think of a nice way to crossfade between the two making it look abit smoother etc...
any help would be greatly appreciated.
EDIT:
So I have just tried to create a CATransaction, however I have an error on one line giving me this error No visible #interface for 'UIView' declares the selector 'jumpBarContainerPortrait' I have added a comment to the line where I get this error below.. any help would be appreciated
[CATransaction begin];
CATransition *animation = [CATransition animation];
animation.type = kCATransitionFade;
animation.duration = 3.50;
[self.view insertSubview:jumpBarContainerPortrait belowSubview:actionTabBar];
[[self.view jumpBarContainerPortrait] addAnimation:animation forKey:#"Fade"]; // Error is happening here!
[CATransaction commit];

Answer 1

Instead of your separate fade in and fade out animations, use the UIView method "transitionFromView". Here's an example:
[UIView transitionFromView:jumpBarContainerLandscape
toView:jumpBarContainerPortrait
duration:crossDissolveTime
options:UIViewAnimationOptionTransitionCrossDissolve
completion:NULL];