Skip to content

Instantly share code, notes, and snippets.

@Ramshandilya
Created December 24, 2013 12:00
Show Gist options
  • Save Ramshandilya/8112302 to your computer and use it in GitHub Desktop.
Save Ramshandilya/8112302 to your computer and use it in GitHub Desktop.
A fancy sequential animation for table rows
typedef enum
{
UITableViewAnimationDirectionFromLeft,
UITableViewAnimationDirectionFromRight
}UITableViewAnimationDirection;
@interface UITableView (CellAnimation)
- (void)animateRowsFromLeft;
- (void)animateRowsFromRight;
@end
#import "UITableView+CellAnimation.h"
@implementation UITableView (CellAnimation)
- (void)animateRowsFromLeft
{
[self animateRowsFromDirection:UITableViewAnimationDirectionFromLeft];
}
- (void)animateRowsFromRight
{
[self animateRowsFromDirection:UITableViewAnimationDirectionFromRight];
}
-(void)animateRowsFromDirection:(UITableViewAnimationDirection)direction{
self.layer.masksToBounds = NO;
CGFloat xOffset = 1.5 * ((direction == UITableViewAnimationDirectionFromLeft) ? -self.frame.size.width : self.frame.size.width);
CGFloat overShoot = (direction == UITableViewAnimationDirectionFromLeft) ? -self.frame.size.width/8 : self.frame.size.width/8;
for (int i = 0; i < self.visibleCells.count; i++) {
UITableViewCell *cell = [self.visibleCells objectAtIndex:i];
cell.transform = CGAffineTransformTranslate(CGAffineTransformIdentity, xOffset, 0);
}
for (int i = 0; i < self.visibleCells.count; i++) {
UITableViewCell *cell = [self.visibleCells objectAtIndex:i];
float delay = (float)i/20.0f;
[UIView animateWithDuration:0.3 delay:delay options:UIViewAnimationOptionCurveEaseIn animations:^{
cell.transform = CGAffineTransformTranslate(cell.transform, -xOffset - overShoot, 0);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
cell.transform = CGAffineTransformTranslate(cell.transform, overShoot, 0);
} completion:^(BOOL finished) {
}];
}];
}
[self performSelector:@selector(animationCompleted) withObject:nil afterDelay:0.7];
}
- (void)animationCompleted
{
self.layer.masksToBounds = YES;
}
@end
@ddaddy
Copy link

ddaddy commented Feb 4, 2015

This looks great :)
Just wondering why you set masksToBounds=NO; during the animation?
I have a button over my tableview and the cell animates over the top of it, then jumps behind it when finished. If I leave masksToBounds=YES; it animates behind the button and I don't see any noticeable difference to anything else.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment