OGeek|极客世界-中国程序员成长平台

标题: ios - 使用表格 View 单元格折叠和弹跳动画 [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-13 16:59
标题: ios - 使用表格 View 单元格折叠和弹跳动画

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



Best Answer-推荐答案


即使这个问题的答案迟到了。让这对任何新观众都有帮助,这是一个带有淡入淡出和反弹的漂亮动画。

将此代码添加到 UITableViewDelegate

tableView willDisplayCell 方法中

objective-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];

Swift 版本

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 部分。

The delay calculation makes sure each cell at each row has a different delay, this makes the animation more viewable at the lower portions of the tableview. Setting a higher delay value would make it profound at the topmost cells also.

SpringWithDamping - essentially a bouncing power. Use value of 1 for no bouncing at all and values closer to 0 to increase oscillation.

SpringVelocity - Value of 1 corresponds to the total animation distance travelled within a second.

options - options for animating views. We are using curveEaseInOut to cause the animation to begin slowly, accelerate through the middle of it's duration, and then slow again before completing.

关于ios - 使用表格 View 单元格折叠和弹跳动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37800745/






欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://jike.in/) Powered by Discuz! X3.4