iPhone CATransition adds a fade to the start and end of any animation? - iphone

So I am just beginning recently developing some simple apps for the iphone. I will say that I am fairly sure I don't have a strong understanding of programming for multiple views yet, but I am trying to learn as I go.
I have a program that started as a plain window based application so i could hand write everything in hopes of learning more about what i am doing. I have a single view controller that acts to load and release views as requested from each of the other view controllers. No elements persist from one view to the other.
I have that working fine currently, but I wanted to add animations to the view changing. A simple push animation was my goal. One view pushes out as the new view pushes in.
Looking into CATransitions and trying that, I have a working version (currently for pushing top/bottom)
[thisView.view removeFromSuperview];
[thisView release];
thisView = [[MenuViewController alloc] initWithNibName:#"MenuView" bundle:nil];
[self.view addSubview:thisView.view];
CATransition *animation = [CATransition animation];
[animation setDuration:6.3];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromTop];
[animation setRemovedOnCompletion:YES];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
[[self.view layer] addAnimation:animation forKey:nil];
as far as I can tell this is pretty standard code for using CATransition and it works to do what I need, one view gets pushed up as the other view comes in. However my problem is that there seems to be a fade that happens to each view as they come in or go out respectively.
As such - in this example; as the menu pushes up from the bottom, it will very slowly fade in from white, and as the previous view leaves the screen it will slowly fade to white.
Note that the duration is set to 6 so that the fading is dramatic.
Is there a way to remove the fading here so that each view remains solid on the way in and the way out? Or have I missed the mark completely in this route that I am taking?
I appreciate any help. Apologies I have been long winded.

I have never been able to find a solution to this problem, but I can offer a reasonable workaround. What's happening is it isn't fading to white, but fading to transparent, and the window background (or whatever view is behind) is white. There are a couple ways to get around this:
Change the window background color. If both views you're fading between have the same solid background color, then this will look pretty good.
Don't render a background in each view ("MenuView," for example), but rather have a shared background view that's under those views at all times.
Note that this will not work in all circumstances -- grouped UITableViews, for example, are always completely opaque.
(As I side note, I assume that you aren't build a navigation-based application, in which case all the animation should be handled automatically.)
You also might want to consider the looking into the UIView method setAnimationTransition:forView:cache: if you haven't already as another way to transition between views (although it cannot do a sliding animation, if you are set on that).

I solved this by enclosing the view to which I have applied the effect into a superview and by setting the superview property "clip subviews". now the fade is "clipped" by the superview.

I was able to get the views to transition without fading at the beginning and end by using UIView animation. NOTE: In the code below, I have a UINavigationController and a UITabBarController inside a main UIView. The main UIVIew (containerView) is what I added as a subView to the Application window. The other two are subviews of the containerView.
UITabBarController *tabBarController = [(AppDelegate_iPhone *)[[UIApplication sharedApplication] delegate] tabBarController];
UIView *containerView = [(AppDelegate_iPhone *)[[UIApplication sharedApplication] delegate] containerView];
UINavigationController *accountsNavigationController = [(AppDelegate_iPhone *)[[UIApplication sharedApplication] delegate] accountsNavigationController];
CGRect accountsNavigationControllerEndFrame = containerView.frame;
CGRect tabBarControllerEndFrame = CGRectMake(containerView.frame.size.width, containerView.frame.origin.y, containerView.frame.size.width, containerView.frame.size.height);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.4];
tabBarController.view.frame = tabBarControllerEndFrame;
accountsNavigationController.view.frame = accountsNavigationControllerEndFrame;
[UIView commitAnimations];

Related

UIDynamics with Core Animation

I have used UIDynamics before, but I never used it along with the methods provided by the Core Animation framework.
I basically would like to achieve something very simple:
I would like my UI Object to travel along a path and have another UI Object attached to it.
I create the attachment behavior like so:
attachment = [[UIAttachmentBehavior alloc] initWithItem:view2 attachedToItem:view1];
So, as view1 being animated, view2 will follow.
All this is working if I trigger it using a UIPushBehavior.
My question is, is it possible to mix UIDynamics using:
CABasicAnimation, CAKeyFrameAnimation and [UIView ....] animation block?
I tried to animate view1 using an animation block.
Result: while view1 is being animated, view2 is not being attached.
If I set off the above using a push behavior, it animates and view2 is attached to view1 without problem.
Again, is it possible applying UIDynamics behaviors to UI Objects while using CABasicAnimation, CAKeyFrameAnimation and [UIView ....] animation block for animation?
Addendum:
Thought I would add the animation block I use (didn't add it because I thought it was too juvenile and simple to mention), but for completeness' sake:
[UIView animateWithDuration:5.0f animations:^
{
view1.center = (CGPoint){320.0, 480.0};
}];
For alloc and init'ing UIDynamics properties it is done in viewDidLoad:
animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
attachment = [[UIAttachmentBehavior alloc] initWithItem:view2 attachedToItem:view1];
[animator addBehavior:attachment];

iOS: is it possible to attechment of MFMailComposeViewController with Animation?

I am working on attach images into MFMailComposeViewController everything is fine working but i want to know that is it Possible to give animation of Attachment?
For Ex:- When we attach images from Photo Gallery in iPhone Device. and while select mail Button that all selected Images Move's in MailComposeViewcontroller with Nice ANIMATION.
So please can any-buddy guide me this stuff is possible or not.? and if YES then how can i set Animation of Attachment.
There exists some semi-solution. You can in fact add any UIView as subview of you main app's window. It will than sit on top of all apps content. Using this you can simulate animation of attaching image to MailComposeViewcontroller
See my example code. This code slides image view from top of the screen to mail composer so it imitates adding of image as attachment. Everything is commented.
// Get apps main window
UIWindow *window = [[UIApplication sharedApplication] keyWindow];
// Setup frames of animated image view in apps window - adjust to your needs
CGRect finalImageFrame = CGRectMake(30, 220, window.frame.size.width-60, 100);
CGRect initialImageFrame = finalImageFrame;
initialImageFrame.origin.y = -initialImageFrame.size.height;
// Create image view to be animated as attachment
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"myImage"]];
imageView.frame = initialImageFrame;
imageView.backgroundColor = [UIColor redColor];
// Add animated image view to window
[window addSubview:imageView];
// Animate image view with slide in from top
[UIView animateWithDuration:0.4
animations:^{
imageView.frame = finalImageFrame;
}];
// Present mail composer
[self presentViewController:mailComposer animated:YES completion:^{
// Once the controller appears, hide the image view - adjust this animation according to you needs
[UIView animateWithDuration:0.4
animations:^{
imageView.alpha = 0;
} completion:^(BOOL finished) {
[imageView removeFromSuperview];
}];
}];
Of course the code may need some adjustments and polishing, but it shows the concept. You can play with animations to make some better effect. There is a lot of animation tweaks I would add, but I wanted to keep the example code as short at it can be ;-)
That is iOS custom animation effects and is not exposed as iOS API's so no you cannot get this effect out of box. The reason I know that this effect is not exposed to developers is from Apple iOS 6 Docs. There is only one method which deals with animate and its the standard one.
What you can try is this. After the user has selected image(s) from his photo gallery (i.e. from ALAssetsLibrary) you can animate a "image" that looks like a MFMailComposeViewController. The animation would similar to what iOS provides i.e. background fading, MFMailComposeViewController appearing and the images sitting in the "body" section of the mail. Once the animation finishes, remove the "image" of MFMailComposeViewController and show the actual call MFMailComposeViewController invoked with animaiton:FALSE option. Hope I was clear. Essentially what you are providing is an illusion of MFMailComposeViewController and once animation is done, taking away the illusion and showing the reality.
Theoretically this could work but exact animation timing and user perceived feel has to be tested out.

iOS views animation

I am trying to create an animation for switching views on iOS devices.
I have create an application with three views and I have some navigation buttons.
The way I use to switch views is this:
-(IBAction) loadThirdView:(id)sender {
[self clearView];
self.thirdViewController.view.frame = CGRectMake(0, 208, 160, 208);
[self.view insertSubview:thirdViewController.view atIndex:0];
}
As you can see this is the action that takes place once I press the button. What I would like is the new view to appear in an animated way.
Specifically I want it to start from the left hand side of the screen and slide to the right. I do not want it just to appear.
Is this possible? how can I do it?
Oh no! Ah, no! Please do not display UIViewControllers this way.
Present your UIViewController this way:
[self presentModalViewController:self.thirdViewController animated:YES]
Before presenting it, you can change the modalTransitionStyle property of the view controller to suit your needs.
If using a UINavigationController, use instead:
[yourNavController pushModalViewController:self.thirdViewController animated:YES]
This is a nice little article (if not a little too harsh): Abusing UIViewControllers
To animate it the way you specifically would like (as the UINavigationController style is sliding in from the right), you might want to use something like what is proposed in this SO question: iPhone Pushing View Controller in a left direction
You can try
[UIView transitionFromView:currView toView:nextView duration:0.5f options:UIViewAnimationOptionTransitionFlipFromLeft completion:nil];
if you want different type of animation. There're lots AnimationsOptions you can choose, just set the options:.
Sample Code :
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:0.6];
yourImageVieew.alpha=0.9;//insert here what you want
[UIView commitAnimations];

Sequential (not hierarchical) navigation in iPhone

I'm getting frustrated at this.
I want to create an iPhone application to show a list of events, one day for each 'screen'. I want a bar at the top with 'next' and 'prev' buttons that allow me to go to tomorrow or yesterday.
It is not a UINavigationController style navigation, because navigation is not hierarchical. Therefore I don't think I should use the pushViewController: method, as many examples and tutorials suggest.
I think that the appdelegate class should remove the current view and create a new viewcontroller and view and add it to the window. However I can't manage to get it working. Also I would like nice transitions.
Can someone point to a code sample that I can look at?
Thank you.
P.D. My question is similar to this one but there is no useful answer.
I wouldn't get hung up on the view controller so much. The view controller/view duality can sometimes get in the way of building custom interfaces.
What you need is a UIToolbar with two buttons, and a sorted array of UIView objects configured appropriately for your entities.
Then when the buttons are clicked, simple [UIVIew animations] should get the job done.
I'm not going to write the code for you. Any casual analysis of the build in UIView animation components will point you on your way.
The only real thing I can tell you is that, having built sophisticated interfaces for the iPhone, the biggest learning curve is knowing when and when not to use UIViewController as opposed to UIView. This is tricky because most of the standard apple components use Controller.
Now it works. Just some details were missing. I'll leave the answer here so that other people can comment on it or use it.
In the AppDelegate class I added this method:
-(void) navigateToDay:(NSDate*) newDay fromDay:(NSDate*) currentDay
{
UIViewAnimationTransition transition = ([newDay compare:currentDay]<0)? UIViewAnimationTransitionCurlDown :
UIViewAnimationTransitionCurlUp;
SequentialNavigationViewController* newController = [[SequentialNavigationViewController alloc] initWithNibName:#"SequentialNavigationViewController" bundle:nil];
newController.app = self;
newController.currentDay = newDay;
[newController.view setFrame:[[UIScreen mainScreen] applicationFrame]];
[UIView beginAnimations:#"transition" context:NULL];
[UIView setAnimationDuration:0.50];
[UIView setAnimationTransition:transition forView:self.window cache:YES];
[window addSubview:newController.view];
[self.viewController.view removeFromSuperview];
[UIView commitAnimations];
self.viewController = newController;
[newController release];
}
And I call this method from the SequentialNavigationViewController prevButtonClicked and nextButtonClicked methods.
Not so hard after all!

How can I replicate the trashing animation of Mail.app

In my iPhone app, I have put a UIBarBUtton of type UIBarButtonSystemItemTrash in my UIToolBar. When pressed, I'd like to replicate the animation of Mail.app: the bin opens, the UIView folds and flies into it.
Is there a way to access this animation ithrough the iPhone SDK?
Presently I am using a custom made animation, but there are some limits; for example, I cannot animate the bin itself.
Do you have any suggestion? Code samples?
Cheers,
Davide
Use the suckEffect type on an animation. Also: spewEffect, genieEffect, unGenieEffect, twist, tubey, swirl, cameraIris, cameraIrisHollowClose, cameraIrisHollowOpen, rippleEffect, charminUltra, zoomyIn, and zoomyOut. Doesn't work in the simulator.
CATransition *animation = [CATransition animation];
animation.type = #"suckEffect";
animation.duration = 2.0f;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
view.opacity = 1.0f;
[view.layer addAnimation:animation forKey:#"transitionViewAnimation"];
Note: Code snippet was pulled from a larger codebase. I hope it works :)
Just to add some info:
You can use "suckEffect" with the standard +[UIView setAnimationTransition:forView:cache:]. Just pass the number 103 to the animationTransition variable. This won't avoid your app being rejected by Apple though :p
"spewEffect", "genieEffect", "unGenieEffect", etc. no longer exist on iPhoneOS 3.x. The only undocumented transition left are "cube" (--), "rippleEffect" (110), the three "cameraIris" effects (105,106,107) and "suckEffect" (103).
See http://www.iphonedevwiki.net/index.php?title=UIViewAnimationState for detail.
Also, to animate the bin (with private API): http://www.iphonedevwiki.net/index.php?title=UIToolbar#Animating_the_trash_can_icon.
Unfortunately, I think this is going to need to be an entirely custom animation. The UIView folding can be approximated using Core Animation, perhaps by adding perspective to the CATransform3D of the UIView's underlying layer to distort the UIView into a trapezoid which gets sucked into the trash can.
As far as the trash can, you can create a UIBarButtonItem using initWithCustomView:, which might let you insert a custom UIView that has an animatable trashcan. It looks like the trash can has two elements, the can base and the lid, which are rotated independently to open and close the can. Draw PNGs for both, make UIImageViews for them, and make them subviews of the UIBarButtonItem custom view. For opening and closing, apply rotational transforms to them to animate the subviews.
I'm not sure if this is an answer but here is lib that do "genie effect" so it's quite similar to what you want achieve.
CGRect endRect = CGRectMake(30, 40, 50, 60);
[view genieInTransitionWithDuration:0.7
destinationRect:endRect
destinationEdge:BCRectEdgeTop
completion:^{
NSLog(#"I'm done!");
}];