1. 显示效果
2. 代码实现
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *topV;
@property (weak, nonatomic) IBOutlet UIImageView *bottomV;
@property (weak, nonatomic) IBOutlet UIView *touchView;
/** 渐变层 */
@property (nonatomic, weak) CAGradientLayer *gradient;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 显示上半部分
self.topV.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
self.topV.layer.anchorPoint = CGPointMake(0.5, 1);
// 只显示下半部分
self.bottomV.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
self.bottomV.layer.anchorPoint = CGPointMake(0.5, 0);
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self.touchView addGestureRecognizer:pan];
// 渐变层
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.bottomV.bounds;
// 设置渐变颜色
gradient.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
// 设置图层的不透明度
gradient.opacity = 0;
self.gradient = gradient;
[self.bottomV.layer addSublayer:gradient];
}
- (void)pan:(UIPanGestureRecognizer *)pan
{
CGPoint offset = [pan translationInView:self.touchView];
CGFloat angle = offset.y * M_PI / 200.0;
CATransform3D transform = CATransform3DIdentity;
transform.m34 = -1 / 300.0;
self.topV.layer.transform = CATransform3DRotate(transform, -angle, 1, 0, 0);
// [pan setTranslation:CGPointZero inView:self.touchView];
// 修改渐变层的不透明度
self.gradient.opacity = offset.y / 200.0;
// 判断手指松开上面的图片复位
if (pan.state == UIGestureRecognizerStateEnded) {
self.gradient.opacity = 0;
//Duration:动画的执行时长
//delay:动画延迟执行的时间
//SpringWithDamping:弹性系数.
//SpringVelocity:弹性的初始速度.
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.25 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
self.topV.layer.transform = CATransform3DIdentity;
} completion:^(BOOL finished) {
}];
}
}
//渐变层
- (void)gradientLayer{
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.bottomV.bounds;
//设置渐变的颜色
gradient.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor];
//修改渐变的方向
gradient.startPoint = CGPointMake(0, 0);
gradient.endPoint = CGPointMake(1, 0);
//设置渐变的起始位置(从哪点开始渐变到下一个颜色)
gradient.locations = @[@0.3,@0.7];
[self.bottomV.layer addSublayer:gradient];
}