iOS 图片折叠效果

原理：

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;
    }
}

最终效果如下：

图片压缩厉害，可能看不出来效果图

最终效果

demo地址