用Swift封裝圖片折疊效果
boyXiong
boyXiong
談到封裝,那么就要從使用者的角度出發(fā),提供外界使用的方法
- 1.新建一個類繼承UIView
class XWFoldImageView: UIView {}
- 2.外界想實現(xiàn)這個效果只需要給我圖片名和控件顯示的frame就夠了，那么提供使用者遍歷構(gòu)造方法
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)
}
談?wù)勅绾尉唧w實現(xiàn) + 大體思想
1.利用兩張一模一樣的圖片,放在同一個UIView上面分了頂部和底部
這里寫圖片描述
這里寫圖片描述
具體代碼
//MARK: 成員屬性
private var imageTopView:UIImageView!
private var imageBottomView:UIImageView!
private var gradientLayer:CAGradientLayer = CAGradientLayer()
//MARK: 便利構(gòu)造
convenience init(imageName:String ,frame:CGRect){
self.init()
self.frame = frame
self.setupDoubleImageViewLayer(imageName)
self.setupGestureRecognizer()
}
//MARK: 設(shè)置圖片圖層的描點和 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.設(shè)置contents顯示比例
self.imageTopView.layer.contentsRect = CGRectMake(0, 0, 1, 0.5)
self.imageBottomView.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5)
//2.1設(shè)置錨點
/** 兩張圖芥吟，各顯示一半诸狭，讓描點為中間的點，這樣才可以用tranfrom
描點就是俭正，在將自己圖層的具體坐標(biāo)點，按照width height 比例計算出x,y 顯示到 position那個點上面去焙畔，整個圖也就跟著動了掸读，旋轉(zhuǎn)是跟著錨點旋轉(zhuǎn)的
*/
self.imageTopView.layer.anchorPoint = CGPointMake(0.5, 1)
self.imageBottomView.layer.anchorPoint = CGPointMake(0.5, 0)
//3.修改圖層坐標(biāo)點,修改postion 其實就是center,改了之后center也跟著改了
self.imageTopView.layer.position = CGPointMake(self.imageTopView.center.x, self.imageTopView.center.y + self.imageTopView.height * 0.5)
//3.1 雖然修改了圖層的contentsRect 但是本身的高度并沒有修改,導(dǎo)致旋轉(zhuǎn)的時候,高度變高
self.imageTopView.height = self.height * 0.5
//3.2 設(shè)置底圖的postion 但是不用設(shè)置實際高，因為不需要形變
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: 手勢執(zhí)行
func panFunc(pan:UIPanGestureRecognizer){
//1.得到偏移量,就是x,y坐標(biāo)與 左上角CGPointZero 的差距
let offSet = pan.translationInView(pan.view)
print(offSet)
//2.得到旋轉(zhuǎn)的角度
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
// 設(shè)置形變的m34就可以增加立體感,立體感(近大遠(yuǎn)小)
transfrom.m34 = -1 / d
//2.根據(jù) y 值的大小進行旋轉(zhuǎn)X軸的角度
transfrom = CATransform3DRotate(transfrom, angle, 1, 0, 0)
self.imageTopView.layer.transform = transfrom
//2.1設(shè)置陰影
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
})
}
}
