iOS CGAffineTransform 实现抽屉动画

我们平时在项目开发中，抽屉动画效果应该是比较常见的动画需求。抽屉动画顾名思义就是跟打开抽屉和合上抽屉效果差不多。常见的应用场景如：播放列表、购物车、分享弹窗等等
效果如图：

先来看看实现

一、抽屉view初始状态为推出时的动画实现

抽屉view展开初始布局

 let contentH:CGFloat = 200
    lazy var drawerView: UIView = {
        let tempView = UIView.init(frame: CGRect(x: 5, y: KScreenHeight - contentH, width: KScreenWidth - 10, height: contentH))
        tempView.backgroundColor = .red
        
        return tempView
    }()

收起

   UIView.animate(withDuration: 0.7) {
       self.drawerView.transform = .init(translationX: 0, y: self.contentH)
        }

推出｜展开

 UIView.animate(withDuration: 0.7) {
     self.drawerView.transform = .init(translationX: 0, y: 0)
      }

抽屉view初始状态为收起时的动画实现

二、抽屉view初始状态为收起时的动画实现

抽屉view收起初始布局

 let contentH:CGFloat = 200
    lazy var drawerView: UIView = {
        let tempView = UIView.init(frame: CGRect(x: 5, y: KScreenHeight, width: KScreenWidth - 10, height: contentH))
        tempView.backgroundColor = .red
        
        return tempView
    }()

收起

   UIView.animate(withDuration: 0.7) {
       self.drawerView.transform = .init(translationX: 0, y: 0)
        }

推出｜展开

 UIView.animate(withDuration: 0.7) {
     self.drawerView.transform = .init(translationX: 0, y: -self.contentH)
      }

观察分析

通过上述两种情况，观察到初始状态的不同，对应展开和收起的y值也不一样，但是有一种情况是一样的，就是无论你通过transform 进行啦什么操作，想恢复初始位置，都可以通过下面这段代码实现：

self.drawerView.transform = .init(translationX: 0, y: 0)

相当于用transform 进行变换矩阵时，初始点是（0，0），所以若想回到初始位置，就设置成(translationX: 0, y: 0)就可以啦。

原理

• CGAffineTransform的初始点是 (0, 0)，即视图的左上角
• 使用transform 变换矩阵时，视图的原点位置不会改变，而是变换视图的内容。变换矩阵将应用于视图的坐标空间，而不是视图本身的位置。

总结

我们通过实现一个常用的抽屉动画的需求，观察分析现象，探索出CGAffineTransform 矩阵变换的规律，再结合CGAffineTransform变换矩阵的原理加深理解，相信后面遇到有关CGAffineTransform平移相关的需求我们都可以应对自如啦。

---

感谢您的阅读和参与，HH思无邪愿与您一起在技术的道路上不断探索。如果您喜欢这篇文章，不妨留下您宝贵的赞！如果您对文章有任何疑问或建议，欢迎在评论区留言，我会第一时间处理，您的支持是我前行的动力，愿我们都能成为更好的自己！