Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 810
nutsmuggler Avatar asked Jan 09 '09 13:01

nutsmuggler


3 Answers

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 :)

like image 108
rpetrich Avatar answered Oct 02 '22 15:10

rpetrich


Just to add some info:

  1. 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
  2. "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.

like image 33
kennytm Avatar answered Oct 02 '22 13:10

kennytm


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.

like image 32
Brad Larson Avatar answered Oct 02 '22 13:10

Brad Larson