UITableViewController

首先我刚看到这个动画的时候，我先给这个动画进行了分解，在这个动画开始前，应该是先修改了cell 的高度，于是我先着手修改cell的高度

//定义了cell打开时和关闭时的高度
let openCellHeight: CGFloat = 505
let closeCellHeight: CGFloat = 180

//设置所有cell 的初始高度
var cellHeights: [CGFloat] = []
override func viewDidLoad() {
        super.viewDidLoad()
        cellHeights = Array(repeating: closeCellHeight, count: rowCount)

    }
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return cellHeights[indexPath.row]
    }

//并在创建的 UITableViewController内重写didSelectorRowAt 方法
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
       let cell = tableView.cellForRow(at: indexPath) as! TestTableViewCell
        
        let cellIsCollapsed = cellHeights[indexPath.row] == closeCellHeight
        if cellIsCollapsed {
            cellHeights[indexPath.row] = openCellHeight
        } else {
            cellHeights[indexPath.row] = closeCellHeight
        }
        tableView.reloadData()
    }

这时点击cell会有高度的变化，但是你会发现cell的高度变化是一瞬间的，并不是慢慢变大,于是我查找了一下资料，发现使用tabelView.beginUpdates()和tabelView.endUpdates()来代替tableView.reloadData()实现cell高度渐变的效果，并且使用UIView.animate(withDuration: TimeInterval, animations: () -> Void)来设置了tabelViewcell高度变化的时间差

UIView.animate(withDuration: druation, delay: 0, options: .curveEaseIn, animations: { () -> Void in
            tableView.beginUpdates()
            tableView.endUpdates()
        }, completion: nil)

这时我们就能通过设置druation来控制cell高度变化的时间，但是，这时你会发现点击cell 后整个cell会变成灰色，经过查找后发现这是由cell的selectionStyle引起的，我们需要把cell.selectionStyle设置为UITableViewCellSelectionStyle.none或者在storybord的界面选择cell后修改Selection为None。

UITableTableCell

第一步，我们要实现点击前和点击后cell的view显现两个不同的View，我们需要在cell 内的ContentView中创建两个高度不同的View(这里我们把forgroundView设为cell关闭时的View，constrainView为cell 打开后的View)当cell是对应的高度时就设置该view的alphe为1，另一个着为0。在我们设置动画之前，我们需要设置的forgroundView和constrainView的位置，我的做法是在storyboard为两个view 都设置了上左右和Height的约束，并把forgroundView和constrainView的Top约束连接到UITableTableCell里并设置它们的constant大小相同

    @IBOutlet weak var foreguoundTop: NSLayoutConstraint!
    @IBOutlet weak var constrainTop: NSLayoutConstraint!

constrainTop.constant = foreguoundTop.constant

第二步，我们先实现一个view能折叠翻转，这时我就想起之前学习的CABasicAnimation的transform.rotation，于是我先试着在forgroundView延底部翻转

animation1 = CABasicAnimation(keyPath: "transform.rotation.x")
        animation1.fromValue = 0
        animation1.toValue = -CGFloat.pi / 2.0
        animation1.duration = 0.13

forgroundView.layer.add(animation1, forKey: "forgroundView")

这时你能发现forgroundView是延中线翻转的我们需要延底部的，这时我们需要设置forgroudView的layer.anchorPoint，默认的View的layer.anchorPoint都为CGPoint(x: 0.5, y: 0.5),这个是View的中心点，要让forgroundView延底部转，我们需要设置layer.anchorPoint为CGPoint(x: 0.5, y: 1)，这时你发现forgroundView的确能延底部翻转，但是你会发现修改layer.anchorPoint后forgroundView的位置发生了偏移，往上偏移了半个forgroundView的高度，查阅资料后发现两条公式：

frame.origin.x = position.x - anchorPoint.x * bounds.size.width 
frame.origin.y = position.y - anchorPoint.y * bounds.size.height

且position不受anchorPoint影响，所以当我们修改View的anchorPoint时变化的就是frame.origin，如果我们要不影响forgroundView的位置
我们需要先记录forgroundView的frame，修改完anchorPoint后再赋值forgroundView的frame

var imageFrame = forgroundView.frame
        forgroundView.layer.anchorPoint = CGPoint(x: 0.5, y: 1)
        forgroundView.frame = imageFrame

在这里我要分享一个我遇到的坑，当初我设置animation和修改anchorPoint都是在cell的awakeFormNib()方法里，这里无论我怎么修改forgroundView的frame，forgroun都不会有任何变化，后来查阅资料才发现，原来awakeFormNib的调用是在ViewController创建之前就调用了，这时获取的View的frame都是不对的，所以无法重新赋值，所以我建议修改frame放在viewDidLayoutSubviews或之后的方法里
第三步
我们现在已经可以在不移动forgroundView情况下翻转forgroundView了，但是我们发现中间翻转的时候是有白色的View的，这是需要创建的，这里我就把显现的ImageViews和需要翻转的animationViews分别创建，这时我们就需要获取forgroundView和constainsView的视图赋值给显现的View

public extension UIView {
    func setSampleView(frame: CGRect) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
        guard let context = UIGraphicsGetCurrentContext() else {
            print("fail")
            return nil
        }
        context.translateBy(x: frame.origin.x * -1   , y: frame.origin.y * -1 )
        layer.render(in: context)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

这里我扩展了UIView来获取forgroundView和constainsView的视图

let firstImage = constrainView.setSampleView(frame: CGRect(x: constrainView.bounds.minX, y: constrainView.bounds.minY, width: forgroundView.frame.width, height: forgroundView.frame.height))
        firstViewBg = UIImageView(image: firstImage)
        firstViewBg.frame = CGRect(x: constrainView.bounds.minX, y: constrainView.bounds.minY, width: forgroundView.frame.width, height: forgroundView.frame.height)

这样我们就可以获取以forgroundView和constrainView为图片的ImageViews和animationViews
第四步
这时我们需要把动画连接起来，我看了FoldingCell里它是通过设置动画的beginTime使动画连续起来，而我选择使用animationDidStop()来使动画连接起来，这个方法的调用需要cell继承CAAnimationDelegate
并且需要设置animatiom需要设置delegate和设置isRemoveOnCompletion为false

animation1.isRemovedOnCompletion = false
animation1.delegate = self

//上一个animation结束时就执行下一个动画
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        if anim == firstImageView.layer.animation(forKey: "firstImageView") {
            firstImageView.alpha = 0
            secondImageView.alpha = 1
            secondImagebgView.alpha = 1
            firstViewBg.layer.masksToBounds = false
            secondImageView.layer.add(animation2, forKey: "secondImageView")
        }
}

当我们我们都设置好之后，运行起来之后我们会发现，我们的翻转并没有那种3D的立体感,这个我们需要设置layer.transform

var animationTransform = CATransform3DIdentity

animationTransform.m34 = -2.5 / 2000

firstImageView.layer.transform = animationTransform

CALayer中有一个transform属性便是专门用来控制3D形变的,transform属性默认值为CATransform3DIdentity, 在CATransform3DIdentity结构体中有一个m34允许我们将正交投影修改为有近大远小立体效果的透视投影,其中m34 = -1.0/z,这个z为观察者与控件之间的距离, m34必须在赋值transform之前设置才会生效.
到此我们的动画基本久已经完成了，在此我想补充一点，可能我们做到这之后运行起来可能会感觉View有时会有一种闪现的感觉，查找资料后，发现animation有个fillMode的属性我们设置未kCAFillModeForwards后能解决该问题

animation1.fillMode = kCAFillModeForwards

到此动画就算基本完成了附上代码

swift TableViewCell折叠动画