iOS - Facebook POP: slide tableview cell to bottom right corner

Question

Maybe you can help me with a problem.

I'm using the new Facebook POP animation framework in an iOS (7) app. I have a tableview with a "+ button" in each cell. I want that if a user clicks on a button in the cell, that the cell (a copy of that cell) slides to the bottom right corner (in the last tabbar item) from alpha 1 to 0. Like a "add to cart" button. So the user knows that the row is added to the cart.

Does anyone know how I can accomplish that with the Facebook POP framework? Or can you point me in the right direction? I think it's not so difficult, but I can't figure it out.

Many thanks in advance!

Answer 1

Assuming you refer to a UITableView inside a UIViewController which is assigned as a tab of a UITabBarController, first you duplicate the selected cell into a UIView and then you perform basic POP animation as follows:

#import <math.h>
#import "POPAnimation.h"
#import "POPBasicAnimation.h"

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];

    UIView *view = [self duplicateCell:cell
                         ContentOffset:tableView.contentOffset
                                   Row:indexPath.row];

    [self.view addSubview:view];

    NSUInteger numberOfTabs = 3;
    CGFloat tabWidth  = self.view.frame.size.width / numberOfTabs;

    [self fadeOutView:view WhileMoveTo:CGRectMake(self.view.frame.size.width - tabWidth,
                                        tableView.frame.size.height,
                                        tabWidth,
                                        view.frame.size.height)];


}

- (UIView*)duplicateCell:(UITableViewCell*)cell ContentOffset:(CGPoint)offset Row:(NSInteger)row
{
    CGFloat cellHeight        = cell.frame.size.height;
    CGFloat topVisibleCellRow = (int)(offset.y / cellHeight) ;
    CGFloat delta             = fmodf(offset.y, cellHeight);
    CGRect frame              = cell.frame;
    frame.origin.y            = (row - topVisibleCellRow)*cellHeight - delta;

    UIView *view = [[UIView alloc] initWithFrame:frame];
    view.backgroundColor = [UIColor yellowColor];

    UILabel *label = [[UILabel alloc] initWithFrame:cell.textLabel.frame];
    label.textColor = [UIColor blackColor];
    label.text = cell.textLabel.text;
    label.contentMode = UIViewContentModeScaleAspectFit;

    [view addSubview:label];

    return view;
}

- (void)fadeOutView:(UIView*)view WhileMoveTo:(CGRect)rect
{
    [view pop_removeAllAnimations];

    POPBasicAnimation  *animFrame = [POPBasicAnimation animationWithPropertyNamed:kPOPViewFrame];
    POPBasicAnimation *animAlpha = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];

    CGFloat fDuration = 1.5f;

    animFrame.toValue = [NSValue valueWithCGRect:rect];
    animFrame.duration = fDuration;
    animAlpha.toValue = @(0.0);
    animAlpha.duration = fDuration;

    [view pop_addAnimation:animFrame forKey:@"animateFrame"];
    [view pop_addAnimation:animAlpha forKey:@"animateAlpha"];
}        

This example is based on a basic UITableViewCell but you can adapt the cell duplication to any custom cell scheme.