使用表格视图单元格折叠和反弹动画

时间:2016-06-13 23:32:45

标签: ios uitableview animation cell

不确定是否有人看过这个开源资料:https://github.com/Ramotion/folding-cell,但我尝试使用带有表视图单元格的反弹动画完成折叠/展开,如上面链接中所示。目前我正在更改单元格的高度并执行tableView.beginUpdates()& tableView.endUpdates()。但结果并不是很好。我也试过改变单元格子视图的顶部约束。这确实提供了更好的动画,但由于单元格的高度保持不变,因此该方法不会使单元格反弹。任何人都有任何想法如何完成这种类型的动画?

1 个答案:

答案 0 :(得分:0)

即使这个问题的答案很晚。让这对所有新观看者都有用,这里是带有淡入淡出和反弹的漂亮动画。

将此代码添加到 UITableViewDelegate

tableView willDisplayCell方法中

目标-C

 cell.transform = CGAffineTransformMakeTranslation(0, cell.frame.size.height);
 cell.alpha = 0;

    [UIView animateWithDuration:0.4 delay:0.03 * indexPath.row 
usingSpringWithDamping:0.8 initialSpringVelocity:0.1 
options:UIViewAnimationOptionCurveEaseInOut animations:^{

        cell.alpha = 1;
        cell.transform = CGAffineTransformMakeTranslation(0, 0);

    } completion:nil];

快速版本

cell.transform = CGAffineTransform(translationX: 0, y: rowHeight)
cell.alpha = 0

        UIView.animate(
            withDuration: 0.4,
            delay: 0.03 * Double(indexPath.row),
            usingSpringWithDamping: 0.8,
            initialSpringVelocity: 0.1,
            options: [.curveEaseInOut],
            animations: {

                cell.alpha = 1
                cell.transform = CGAffineTransform(translationX: 0, y: 0)

        })

我还添加了淡入淡出效果,如果不需要,请删除动画中包含的alpha部分。

  

延迟计算可确保每一行的每个单元格都有一个   不同的延迟,这使得动画在较低处更加可见   tableview的部分。设置较高的延迟值将使其   最顶层的单元格也很深刻。

     

SpringWithDamping -本质上是弹跳力。使用值1表示不弹跳   全部和接近0的值会增加振荡。

     

SpringVelocity -值1对应于整个动画   在一秒内走过的距离。

     

选项-用于设置视图动画的选项。我们正在使用curveEaseInOut   使动画开始缓慢,加速到中间   持续时间,然后在完成之前再次变慢。