Jak symulować krotnie papieru podczas wstawiania i usuwania wierszy w UITableView

Question

Więc staram się symulować papieru krotnie typu origami podczas dodawania i usuwania komórek podobnie aplikacji peek Kalendarz:

Dostałem całkiem blisko ta funkcjonalność przez podklasowanie UITableView i przesłanianie insertRowsAtIndexPaths: withRowAnimation: i deleteRowsAtIndexPaths: withRowAnimation:

Jednak teraz nie mogę sprawić, że animacja wygląda dobrze. Poniżej znajduje się mój obecny kod - chciałbym pomóc w pokonaniu tej ostatniej przeszkody (a może jest zupełnie inne podejście, takie jak dodanie tableview do tableviewcell).

- (void)insertRowsAtIndexPaths:(NSArray *)indexPaths 
       withRowAnimation:(UITableViewRowAnimation)animation 
{ 
    [super insertRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationNone]; 
    float duration = .30; 
    int i = 0; 
    for (NSIndexPath *indexPath in indexPaths) { 
     __block UITableViewCell *cell = [super cellForRowAtIndexPath:indexPath]; 
     if (cell) { // If indexPath isn't visible we'll get nil here 

      //even cells flip up while odd cells flip down 
      if(i % 2 ==0){ 
       cell.layer.anchorPoint = CGPointMake(.5, 0); 

       //start row off by rotating 90 degrees 
       __block CATransform3D t = CATransform3DIdentity; 
       t = CATransform3DTranslate(t, 0, -cell.bounds.size.height/2, 0); 
       t = CATransform3DRotate(t, hn_radians(90), 1, 0, 0); 
       t.m34 = -1.0/(cell.layer.bounds.size.height * 4.6666667); 

       cell.layer.transform = t; 


       //flip up 
       [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ 
        t = CATransform3DIdentity; 
        t = CATransform3DTranslate(t, 0, -cell.bounds.size.height/2, 0); 

        cell.layer.transform = t; 
        NSLog(@""); 
       } completion:^(BOOL finished) { 
        cell.layer.transform = CATransform3DIdentity; 
        cell.layer.anchorPoint = CGPointMake(.5, .5); 
       }]; 



      } 
      else{ 

       cell.contentView.layer.anchorPoint = CGPointMake(.5, 1); 

       //start row off by rotating 90 degrees 
       __block CATransform3D t = CATransform3DIdentity; 
       t = CATransform3DTranslate(t, 0, -cell.contentView.bounds.size.height * 0.5f, 0); 
       t = CATransform3DRotate(t, hn_radians(-90), 1, 0, 0); 
       t.m34 = -1/500.f; 

       cell.contentView.layer.transform = t; 

       //flip down 
       [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ 
        t = CATransform3DIdentity; 
        t = CATransform3DTranslate(t, 0, cell.contentView.bounds.size.height * 0.5f, 0); 
        cell.contentView.layer.transform = t; 
       } completion:^(BOOL finished) { 
        //reset anchor and transform 
        cell.contentView.layer.transform = CATransform3DIdentity; 
        cell.contentView.layer.anchorPoint = CGPointMake(.5, .5); 
       }]; 

      } 
      i++; 



     } 

    } 
} 

Answer 1

W pliku UITableViewCell.h napisać to:

@property (nonatomic, assign) CGFloat finishedHeight; 
@property (nonatomic, strong) UIView *transformable1HalfView; 
@property (nonatomic, strong) UIView *transformable2HalfView; 

W pliku UITableViewCell .m napisać to:

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier 
{ 
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; 
    if (self) { 
     // Initialization 
     CATransform3D transform = CATransform3DIdentity; 
     transform.m34 = -1/500.f; 
     [self.contentView.layer setSublayerTransform:transform]; 

     self.transformable1HalfView = [[UIView alloc] initWithFrame:self.contentView.bounds]; 
     [self.transformable1HalfView.layer setAnchorPoint:CGPointMake(0.5, 0.0)]; 
     [self.transformable1HalfView setClipsToBounds:YES]; 
     [self.contentView addSubview:self.transformable1HalfView]; 

     self.transformable2HalfView = [[UIView alloc] initWithFrame:self.contentView.bounds]; 
     [self.transformable2HalfView.layer setAnchorPoint:CGPointMake(0.5, 1.0)]; 
     [self.transformable2HalfView setClipsToBounds:YES]; 
     [self.contentView addSubview:self.transformable2HalfView]; 
     self.selectionStyle = UITableViewCellSelectionStyleNone; 
     self.textLabel.autoresizingMask = UIViewAutoresizingNone; 
     self.textLabel.backgroundColor = [UIColor clearColor]; 
     self.detailTextLabel.autoresizingMask = UIViewAutoresizingNone; 
     self.detailTextLabel.backgroundColor = [UIColor clearColor]; 

    } 
    return self; 
} 
- (void)layoutSubviews 
{ 
    [super layoutSubviews]; 

    CGFloat fraction = (self.frame.size.height/self.finishedHeight); 
    fraction = MAX(MIN(1, fraction), 0); 

    CGFloat angle = (M_PI/2) - asinf(fraction); 
    CATransform3D transform = CATransform3DMakeRotation(angle, -1, 0, 0); 
    [self.transformable1HalfView.layer setTransform:transform]; 
    [self.transformable2HalfView.layer setTransform:CATransform3DMakeRotation(angle, 1, 0, 0)]; 


    CGSize contentViewSize = self.contentView.frame.size; 
    CGFloat contentViewMidY = contentViewSize.height/2; 
    CGFloat labelHeight = self.finishedHeight/2; 

    // OPTIONAL: Always accomodate 1 px to the top label to ensure two labels 
    // won't display one px gap in between sometimes for certain angles 
    self.transformable1HalfView.frame = CGRectMake(0, contentViewMidY - (labelHeight * fraction), 
                contentViewSize.width, labelHeight + 1); 
    self.transformable2HalfView.frame = CGRectMake(0, contentViewMidY - (labelHeight * (1 - fraction)), 
                contentViewSize.width, labelHeight); 

    if ([self.textLabel.text length]) { 
     self.detailTextLabel.text = self.textLabel.text; 
     self.detailTextLabel.font = self.textLabel.font; 
     self.detailTextLabel.textColor = self.textLabel.textColor; 
     self.detailTextLabel.textAlignment = self.textLabel.textAlignment; 
     self.detailTextLabel.textColor = [UIColor whiteColor]; 
     self.detailTextLabel.shadowColor = self.textLabel.shadowColor; 
     self.detailTextLabel.shadowOffset = self.textLabel.shadowOffset; 
    } 
    self.textLabel.frame = CGRectMake(10.0, 0.0, contentViewSize.width - 20.0, self.finishedHeight); 
    self.detailTextLabel.frame = CGRectMake(10.0, -self.finishedHeight/2, contentViewSize.width - 20.0, self.finishedHeight); 
} 

referencyjny: https://github.com/jamztang/JTGestureBasedTableViewDemo

Cheers.