原理：
1、创建工程-打开Main.storyboard-拖入两个ImageView
1
![Uploading 2_500742.png . . .]
.
调整位置
调整位置
.
设置图片
设置图片后
2、拖线
.
拖线
把两个图片重叠在一起，并且bottom ImageV在上面，Top ImageV在下面
效果
3、在上面添加一个透明的View，大小和位置与图片一样
效果
调整位置大小
- 把图片设置为200 100 并且居中
-
把View设置为200 200并且居中
最后如下：
设置如下效果
.
.
为透明VIew添加手势
添加手势
.
.
.
把手势事件添加到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、手势动画
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、添加阴影效果
- 要使用到一个类：CAGradientLayer
基本属性介绍： - colors:颜色数组
- startPoint:开始点
- endPoint：结束点
- locations：颜色开始的位置
- 注意要设置大小，可以通过opacity来设置不透明度
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];
.
.
.
最终的手势代码：
- (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;
//创建阴影效果
self.gradientL.opacity = curP.y * 1 / 256.0;
self.topImageV.layer.transform = CATransform3DMakeRotation(-angle, 1, 0, 0);
}
break;
default:
break;
}
}
最终效果如下：
图片压缩厉害，可能看不出来效果图
最终效果
