iOS Button Animation Like Mail App

Question

In the iOS mail app if you go to inbox and swipe over an item the archive button gets revealed from right to left (and the way around when is disappears). I'm trying to get this behaviour in my app, the way I approached this is animating the mask layer of a button and moving it from right to left. The issue I'm having here is that once the animation ends the button disappears.

//Create Mask Layer
CALayer *maskLayer = [CALayer layer];
maskLayer.frame = CGRectMake(cell.deleteButton.frame.size.width,0,cell.deleteButton.frame.size.width,cell.deleteButton.frame.size.height);
maskLayer.backgroundColor = [UIColor whiteColor].CGColor;

cell.deleteButton.layer.mask = maskLayer;

// Setting the animation
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.x"];
animation.byValue = [NSNumber numberWithFloat:-cell.deleteButton.frame.size.width];
animation.duration = 0.4f;

[cell.deleteButton.layer.mask addAnimation:animation forKey:@"maskAnimation"];

So I wonder how to get the button not to disappear after the animation or if there is a better way to create the animation.

Just in case, if you need the same delete button as Mail—it's built in table view — Dmitry Shevchenko, Apr 23 '13 at 08:30
I've just tried this approach, and it's not so hard to customize the default behaviour. This post helped greatly: http://stackoverflow.com/questions/2104403/iphone-uitableview-delete-button — ggfela, Apr 23 '13 at 11:34

score 1 · Accepted Answer · answered Apr 23 '13 at 08:29

With your implementation you are shifting the mask with animation after animation completes it will retain the last position of mask. That is why the button is getting hidden.

you need to set the delegate to your class:

animation.delegate = self;

and then implement the following code in delegate method:

 -(void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
 {
     CALayer *maskLayer = [CALayer layer];
     maskLayer.frame = CGRectMake(0,0,self.btnLogin.frame.size.width,
          self.btnLogin.frame.size.height);
     maskLayer.backgroundColor = [UIColor whiteColor].CGColor;

     self.btnLogin.layer.mask = maskLayer;
 }

hope it helps.

iOS Button Animation Like Mail App

1 Answers1