Swift中如何实现UITableViewCell卡片翻转式出现动画？

嘿，刚好我之前做过类似的卡片翻转入场动画，给你一步步拆解怎么实现，避开那些容易踩的坑：

一、选对动画触发时机 #

UITableView的tableView(_:willDisplay:forRowAt:)方法是最佳选择——这个方法会在cell即将显示到屏幕上时调用，刚好适合做入场动画，比cellForRowAt更靠谱，因为后者是创建cell的时机，此时cell还没出现在屏幕上，动画效果会提前执行。

二、两种实现思路（附代码） #

思路1：用UIView动画实现3D翻转 #

这种方式可以自定义初始状态，还能结合弹簧动画让效果更丝滑：

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    // 1. 设置cell初始状态：绕Y轴翻转180度（背面朝向用户），同时透明
    cell.layer.transform = CATransform3DMakeRotation(.pi, 0, 1, 0)
    cell.alpha = 0.0
    
    // 2. 执行翻转动画，给不同行加延迟，营造错落感
    UIView.animate(withDuration: 0.6, 
                   delay: 0.1 * Double(indexPath.row), 
                   usingSpringWithDamping: 0.8, 
                   initialSpringVelocity: 0.5, 
                   options: .curveEaseInOut) {
        // 恢复到正常状态
        cell.layer.transform = CATransform3DIdentity
        cell.alpha = 1.0
    }
}

思路2：用CATransition实现系统翻转效果 #

如果想要更简洁的系统级翻转动画，可以用核心动画的CATransition：

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    let flipTransition = CATransition()
    flipTransition.type = .flip // 翻转类型
    flipTransition.subtype = .fromLeft // 可以换成.fromRight/.fromTop/.fromBottom
    flipTransition.duration = 0.5 // 动画时长
    flipTransition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut) // 缓动函数
    cell.layer.add(flipTransition, forKey: "cellFlipAnimation")
}

三、必须处理的cell复用问题 #

因为UITableView会复用cell，所以一定要在自定义cell的prepareForReuse方法里重置状态，不然复用的cell会带着上一次的动画残留：

class CustomTableViewCell: UITableViewCell {
    override func prepareForReuse() {
        super.prepareForReuse()
        // 重置transform和透明度
        layer.transform = CATransform3DIdentity
        alpha = 1.0
        // 如果用了CATransition，移除之前的动画
        layer.removeAnimation(forKey: "cellFlipAnimation")
    }
}

四、优化小技巧 #

• 给不同indexPath的cell加递增延迟（比如0.1 * Double(indexPath.row)），让动画一行一行依次触发，视觉效果更有层次；
• 调整usingSpringWithDamping和initialSpringVelocity参数，可以做出带轻微回弹的翻转效果，更生动；
• 如果是自定义cell，可以把动画逻辑封装成一个方法（比如startFlipAnimation()），在willDisplay里调用，代码更解耦。

内容的提问来源于stack exchange，提问作者Koustov Basu