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

,来完成复杂的自定义控件操作，应该容易点