基于iOS实现图片折叠效果

CATransform3D transform = CATransform3DIdentity;

transform.m34 = - 1 / 200.0;
transform = CATransform3DRotate(transform, angle, 1, 0, 0);

gradientL.startPoint = CGPointMake(0, 0); 
gradientL.endPoint = CGPointMake(0, 1);

gradientL.startPoint = CGPointMake(0, 0); 
gradientL.endPoint = CGPointMake(1, 0);

gradientL.colors =
@[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];

CGFloat opacity = 1 * transP.y / 200.0;

//手指松开，图片复位
if(pan.state == UIGestureRecognizerStateEnded){
 //把渐变效果透明
 self.gradient.opacity = 0;

 //delay:动画延时执行时间
 //Damping:弹性系数,设的超小, 弹性就越大
 //Velocity:弹性的初始速度
 //options:以什么样样式来做动画,开始有结束慢,
 [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
  //上部分图片复位
  self.topIv.layer.transform = CATransform3DIdentity;
 } completion:nil];
}

//
// ViewController.m
// 03_UIView74_图片折叠
//
// Created by 杞文明 on 17/7/19.
// Copyright © 2017年 杞文明. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *topIv;
@property (weak, nonatomic) IBOutlet UIImageView *bottomIv;
@property (weak, nonatomic) IBOutlet UIView *dragView;
@property (nonatomic, weak) CAGradientLayer *gradient;

#define MAX_H self.dragView.bounds.size.height

@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];
 //让上部图层显示上半部分
 self.topIv.layer.cOntentsRect= CGRectMake(0, 0, 1, 0.5);
 self.topIv.layer.anchorPoint = CGPointMake(0.5, 1);

 //让下部图片只显示下半部分
 self.bottomIv.layer.cOntentsRect= CGRectMake(0, 0.5, 1, 0.5);
 self.bottomIv.layer.anchorPoint = CGPointMake(0.5, 0);

 //添加手势
 UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
 [self.dragView addGestureRecognizer:pan];

 //渐变层
 [self gradientLayer];
}

-(void)gradientLayer{
 //渐变层
 CAGradientLayer *gradient = [CAGradientLayer layer];
 gradient.frame = self.bottomIv.bounds;
 //设置渐变的颜色
 gradient.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];

 [self.bottomIv.layer addSublayer:gradient];
 gradient.opacity = 0;
 self.gradient = gradient;
}

-(void)pan:(UIPanGestureRecognizer*)pan{
 //获取当前手指的偏移量
 CGPoint tranP = [pan translationInView:self.dragView];

 //最大旋转180
 //当手指偏移量为dragView的高度时为180
 CGFloat angle = tranP.y * M_PI / MAX_H;

 CATransform3D transform = CATransform3DIdentity;

 //设置立体效果（近大远小）
 //设置眼睛和屏幕的距离
 transform.m34 = -1 /300.0;

 //设置渐变层的不透明度
 self.gradient.opacity = tranP.y / MAX_H;

 //让上层图片绕x轴旋转
 self.topIv.layer.transform = CATransform3DRotate(transform, -angle, 1, 0, 0);

 //手指松开，图片复位
 if(pan.state == UIGestureRecognizerStateEnded){
  //把渐变效果透明
  self.gradient.opacity = 0;

  //delay:动画延时执行时间
  //Damping:弹性系数,设的超小, 弹性就越大
  //Velocity:弹性的初始速度
  //options:以什么样样式来做动画,开始有结束慢,
  [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
   //上部分图片复位
   self.topIv.layer.transform = CATransform3DIdentity;
  } completion:nil];
 }
}

@end