图片折叠效果

最终的效果,图片来自网络,

OC代码

#import"ViewController.h"

@interfaceViewController()

@property(weak,nonatomic)IBOutletUIImageView*topView;

@property(weak,nonatomic)IBOutletUIImageView*bottomView;

@property(weak,nonatomic)IBOutletUIView*dragView;

@property(nonatomic,weak)CAGradientLayer*layer;

@end

@implementationViewController

- (void)viewDidLoad {

[superviewDidLoad];

//先让上部分View显示图片上部分内容

// 0~1

_topView.layer.contentsRect=CGRectMake(0,0,1,0.5);

//设置锚点

_topView.layer.anchorPoint=CGPointMake(0.5,1);

//设置下部分显示内容

_bottomView.layer.contentsRect=CGRectMake(0,0.5,1,0.5);

_bottomView.layer.anchorPoint=CGPointMake(0.5,0);

//添加拖动手势

UIPanGestureRecognizer*pan = [[UIPanGestureRecognizeralloc]initWithTarget:selfaction:@selector(pan:)];

[_dragViewaddGestureRecognizer:pan];

//阴影效果,添加到底部

CAGradientLayer*layer = [CAGradientLayerlayer];

_layer= layer;

layer.frame=_bottomView.bounds;

//设置渐变颜色

layer.colors=@[(id)[UIColorclearColor].CGColor,(id)[UIColorblackColor].CGColor];

layer.opacity=0;

//    //设置渐变的方向

//

layer.startPoint = CGPointMake(0, 0);

//

layer.endPoint = CGPointMake(1, 0);

//

//    //设置颜色渐变的开始位置

//

layer.locations = @[@0.5];

[_bottomView.layeraddSublayer:layer];

}

//只要手指在拖动的View移动的时候就会调用

- (void)pan:(UIPanGestureRecognizer*)pan

{

//获取手势偏移量

CGPointtransP =  [pantranslationInView:_dragView];

//计算旋转角度

CGFloatangle = -transP.y/200.0*M_PI;

//增加立体感

CATransform3Dtransform =CATransform3DIdentity;

//

d:人的眼睛和屏幕的垂直距离

CGFloatd =300;

//设置形变的m34就可以增加立体感,立体感(近大远小)

transform.m34= -1/ d;

//秒速形变的旋转的度数

transform =CATransform3DRotate(transform,angle,1,0,0);

//开始旋转

_topView.layer.transform= transform;

//设置阴影的透明度

CGFloatopacity = transP.y/200;

_layer.opacity= opacity;

if(pan.state==UIGestureRecognizerStateEnded) {

//还原

// Damping:值越小,弹簧效果越明显

// options:秒速动画执行过程,匀速,快入快出

[UIViewanimateWithDuration:1delay:0usingSpringWithDamping:0.2initialSpringVelocity:1options:UIViewAnimationOptionCurveEaseInOutanimations:^{

_topView.layer.transform=CATransform3DIdentity;

}completion:^(BOOLfinished) {

}];

//弹簧效果

//上部分形变清空

//阴影透明

_layer.opacity=0;

}

}

@end