文／猫爪（简书作者）
原文链接：http://www.jianshu.com/p/688c491580e3
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
通过这个思想，通过捆绑式控件,让父控件响应用户交互,然后控制子控件形变,来实现复杂的UI动画效果比继承
原文链接：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
})
}
}