原理：
1、創(chuàng)建工程-打開Main.storyboard-拖入兩個(gè)ImageView
1
![Uploading 2_500742.png . . .]
.
調(diào)整位置
調(diào)整位置
.
設(shè)置圖片
設(shè)置圖片后
2、拖線
.
拖線
把兩個(gè)圖片重疊在一起糊昙，并且bottom ImageV在上面僻造，Top ImageV在下面
效果
3、在上面添加一個(gè)透明的View宿崭，大小和位置與圖片一樣
效果
調(diào)整位置大小
- 把圖片設(shè)置為200 100 并且居中
-
把View設(shè)置為200 200并且居中
最后如下：
設(shè)置如下效果
.
.
為透明VIew添加手勢(shì)
添加手勢(shì)
.
.
.
把手勢(shì)事件添加到VC中
效果下
4亲铡、處理量ImageVIew，讓他們都各自顯示一半
self.topImageV.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
self.topImageV.layer.anchorPoint = CGPointMake(0.5, 1);
self.bottomImageV.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
self.bottomImageV.layer.anchorPoint = CGPointMake(0.5, 0);
5葡兑、手勢(shì)動(dòng)畫
CGPoint curP = [sender locationInView:sender.view];
//angle
CGFloat angle = curP.y * M_PI / 180.0;
self.topImageV.layer.transform = CATransform3DMakeRotation(-angle, 1, 0, 0);
.
.
.
6奖蔓、添加陰影效果
- 要使用到一個(gè)類：CAGradientLayer
基本屬性介紹： - colors:顏色數(shù)組
- startPoint:開始點(diǎn)
- endPoint：結(jié)束點(diǎn)
- locations：顏色開始的位置
- 注意要設(shè)置大小，可以通過opacity來設(shè)置不透明度
CAGradientLayer * gradientL = [CAGradientLayer layer];
gradientL.frame = self.bottomImageV.bounds;
gradientL.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
self.gradientL = gradientL;
self.gradientL.opacity = 0;
[self.bottomImageV.layer addSublayer:gradientL];
.
.
.
最終的手勢(shì)代碼：
- (IBAction)foldImage:(UIPanGestureRecognizer *)sender {
switch (sender.state) {
case UIGestureRecognizerStateEnded:
{
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.25 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
self.gradientL.opacity = 0;
self.topImageV.layer.transform = CATransform3DIdentity;
} completion:^(BOOL finished) {
}];
}
break;
case UIGestureRecognizerStateChanged:{
CGPoint curP = [sender locationInView:sender.view];
//angle
CGFloat angle = curP.y * M_PI / 180.0;
//創(chuàng)建陰影效果
self.gradientL.opacity = curP.y * 1 / 256.0;
self.topImageV.layer.transform = CATransform3DMakeRotation(-angle, 1, 0, 0);
}
break;
default:
break;
}
}
最終效果如下：
圖片壓縮厲害铁孵，可能看不出來效果圖
最終效果
