如何在 UITableView 中插入和删除行时模拟折纸

Question

所以我试图在添加和删除单元格的同时模拟折纸类型的折纸，就像 peek Calendar 应用程序：

通过继承 UITableView 并覆盖 insertRowsAtIndexPaths:withRowAnimation: 和 deleteRowsAtIndexPaths:withRowAnimation:，我已经非常接近这个功能了：

但是现在我似乎无法让动画看起来正确。下面是我当前的代码 - 我只是想帮助克服最后一个障碍（或者可能有一种完全不同的方法，例如将 tableview 添加到 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

在UITableViewCell.h 文件中写下这个：

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

在UITableViewCell .m 文件中写下这个：

- (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);
}

参考：https://github.com/jamztang/JTGestureBasedTableViewDemo

干杯。