Swift 2.0 封装图片折叠效果

文／猫爪（简书作者）
原文链接：http://www.jianshu.com/p/688c491580e3
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

用Swift封装图片折叠效果

boyXiong

谈到封装,那么就要从使用者的角度出发,提供外界使用的方法

• 1.新建一个类继承UIView

  class XWFoldImageView: UIView {}

• 2.外界想实现这个效果只需要给我图片名和控件显示的frame就够了，那么提供使用者遍历构造方法

  convenience init(imageName:String ,frame:CGRect){
      self.init()
      self.frame = frame //1.在初始化做的操作
      self.setupDoubleImageViewLayer(imageName)
      self.setupGestureRecognizer()
  }

• 3那么外界使用就是非常方便,如:

  override func viewDidLoad() {  super.viewDidLoad()
        let foldImageView = XWFoldImageView(imageName: "image", frame: CGRectMake(50, 100, 300, 200))
        self.view.addSubview(foldImageView)
  }

---

谈谈如何具体实现 + 大体思想

1.利用两张一模一样的图片,放在同一个UIView上面分了顶部和底部

这里写图片描述

具体代码

    //MARK: 成员属性
    private var imageTopView:UIImageView!
    private var imageBottomView:UIImageView!
    private var gradientLayer:CAGradientLayer = CAGradientLayer()

    //MARK: 便利构造

    convenience init(imageName:String ,frame:CGRect){
        self.init()
        self.frame = frame
        self.setupDoubleImageViewLayer(imageName)
        self.setupGestureRecognizer()
    }

    //MARK: 设置图片图层的描点和 postion
    private func setupDoubleImageViewLayer(imageName:String){

        //1添加到父控件
        let imageBottomView = UIImageView(image: UIImage(named: imageName))
        imageBottomView.frame = self.bounds
        imageBottomView.contentMode = UIViewContentMode.ScaleToFill
        self.addSubview(imageBottomView)
        self.imageBottomView = imageBottomView

        let imageTopView = UIImageView(image: UIImage(named: imageName))
        imageTopView.frame = self.bounds
        imageTopView.contentMode = UIViewContentMode.ScaleToFill
        self.addSubview(imageTopView)
        self.imageTopView = imageTopView

        //2.设置contents显示比例
        self.imageTopView.layer.contentsRect = CGRectMake(0, 0, 1, 0.5)
        self.imageBottomView.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5)

        //2.1设置锚点
        /**     两张图，各显示一半，让描点为中间的点，这样才可以用tranfrom

        描点就是，在将自己图层的具体坐标点，按照width  height 比例计算出x,y 显示到 position那个点上面去，整个图也就跟着动了，旋转是跟着锚点旋转的
        */
        self.imageTopView.layer.anchorPoint = CGPointMake(0.5, 1)
        self.imageBottomView.layer.anchorPoint = CGPointMake(0.5, 0)

        //3.修改图层坐标点,修改postion 其实就是center,改了之后center也跟着改了
        self.imageTopView.layer.position = CGPointMake(self.imageTopView.center.x, self.imageTopView.center.y + self.imageTopView.height * 0.5)
        //3.1 虽然修改了图层的contentsRect 但是本身的高度并没有修改,导致旋转的时候,高度变高
        self.imageTopView.height = self.height * 0.5

        //3.2 设置底图的postion 但是不用设置实际高，因为不需要形变
        self.imageBottomView.height = self.height * 0.5

        //4 给图层增加一个阴影层
        self.gradientLayer.frame = self.imageBottomView.bounds
        //4.1渐变的颜色
        self.gradientLayer.colors = [UIColor .clearColor().CGColor, UIColor.blackColor().CGColor]
        //不透明度
        self.gradientLayer.opacity = 0

        self.imageBottomView.layer.addSublayer(self.gradientLayer)

    }

---

2.给父控件添加手势，来改变子控件图层的形变

这里写图片描述

具体代码

//MARK: 添加手势拖拽
    private func setupGestureRecognizer(){
        //1.
        let pan = UIPanGestureRecognizer(target: self, action: "panFunc:")

        self.addGestureRecognizer(pan)
    }

    //MARK: 手势执行

    func panFunc(pan:UIPanGestureRecognizer){

        //1.得到偏移量,就是x,y坐标与 左上角CGPointZero 的差距
        let offSet = pan.translationInView(pan.view)

        print(offSet)

        //2.得到旋转的角度
        var angle = -kAngle2Radian(offSet.y) * 5

        //3.如果大于角度就固定最刚好遮盖值
        if fabs(angle) >= kAngle2Radian(340) * 5 {

            angle = angle / angle *  kAngle2Radian(346) * 5
        }

        //增强立体感
        var transfrom:CATransform3D = CATransform3DIdentity
        // d:人的眼睛和屏幕的垂直距离
        let d:CGFloat = 300
        // 设置形变的m34就可以增加立体感,立体感(近大远小)
        transfrom.m34 = -1 / d

        //2.根据 y 值的大小进行旋转X轴的角度
         transfrom =  CATransform3DRotate(transfrom, angle, 1, 0, 0)

        self.imageTopView.layer.transform = transfrom

        //2.1设置阴影
        self.gradientLayer.opacity = Float(fabs(angle) / (kAngle2Radian(346) * 4.0))

        //3.检查用户抬起手势
        if pan.state == UIGestureRecognizerState.Ended {

            UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.1, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in

                self.imageTopView.layer.transform = CATransform3DIdentity

                self.gradientLayer.opacity = 0;

                }, completion: { (Bool) -> Void in

            })

        }

    }

---

通过这个思想，通过捆绑式控件,让父控件响应用户交互,然后控制子控件形变,来实现复杂的UI动画效果比继承UIControl,来完成复杂的自定义控件操作，应该容易点