1.UI布局
一个topView,一个bottomView,一个dragView。
topView的宽度和图片宽度一样，高度是图片宽度的一半；
bottomView和topView重合。
dragView是topView和bottomView的父控件，并且中心点与之重合，高度是其2倍，宽度与其相同。
2.代码实现
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *topView;
@property (weak, nonatomic) IBOutlet UIImageView *bottomView;
@property (weak, nonatomic) IBOutlet UIView *dragView;
@property (nonatomic, weak) CAGradientLayer *gradientL;
@end
@implementation ViewController
// 一张图片必须要通过两个控件展示，旋转的时候，只旋转上部分控件
// 如何让一张完整的图片通过两个控件显示
// 通过layer控制图片的显示内容
// 如果快速把两个控件拼接成一个完整图片
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 通过设置contentsRect可以设置图片显示的尺寸，取值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 = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[_dragView addGestureRecognizer:pan];
// 渐变图层
CAGradientLayer *gradientL = [CAGradientLayer layer];
// 注意图层需要设置尺寸
gradientL.frame = _bottomView.bounds;
gradientL.opacity = 0;
gradientL.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
_gradientL = gradientL;
// 设置渐变颜色
// gradientL.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor yellowColor].CGColor];
// 设置渐变定位点
// gradientL.locations = @[@0.1,@0.4,@0.5];
// 设置渐变开始点，取值0~1
// gradientL.startPoint = CGPointMake(0, 1);
[_bottomView.layer addSublayer:gradientL];
}
// 拖动的时候旋转上部分内容，200 M_PI
- (void)pan:(UIPanGestureRecognizer *)pan
{
// 获取偏移量
CGPoint transP = [pan translationInView:_dragView];
// 旋转角度,往下逆时针旋转
CGFloat angle = -transP.y / 200.0 * M_PI;
CATransform3D transfrom = CATransform3DIdentity;
// 增加旋转的立体感，近大远小,d：距离图层的距离
transfrom.m34 = -1 / 500.0;
transfrom = CATransform3DRotate(transfrom, angle, 1, 0, 0);
_topView.layer.transform = transfrom;
// 设置阴影效果
_gradientL.opacity = transP.y * 1 / 200.0;
if (pan.state == UIGestureRecognizerStateEnded) { // 反弹
// 弹簧效果的动画
// SpringWithDamping:弹性系数,越小，弹簧效果越明显
[UIView animateWithDuration:0.6 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseInOut animations:^{
_topView.layer.transform = CATransform3DIdentity;
} completion:^(BOOL finished) {
// 设置阴影效果
_gradientL.opacity = 0;
}];
}
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
3.iOS界面中的三维坐标系
右手坐标系，原点在左下角，即x正方向向右，y正方向向上，z正方向向前指向观察者。
左手坐标系，原点在左上角，即x正方向向右，y正方向向下，z正方向向前指向观察者。
7419361874_f5d16fb101.jpg
UIView坐标系
而在ios的UIView中，统一使用左手坐标系，也就是坐标原点在左上角.
7420067916_889152557b.jpg
Quartz坐标系
Quartz（Core Graphics）坐标系使用的右手坐标系,原点在左下角,所以所有使用Core Graphics画图的坐标系都是右手坐标系，当使用CG的相关函数画图到UIView上的时候，需要注意CTM的Flip变换，要不然会出现界面上图形倒过来的现象。由于UIKit的提供的高层方法会自动处理CTM（比如UIImage的drawInRect方法），所以无需自己在CG的上下文中做处理。
/**
* 平移坐标轴
*/
CGContextTranslateCTM(context, 0, bounds.size.height);
/**
* 翻转Y坐标轴
*/
CGContextScaleCTM(context, 1, -1);
CALayer坐标系
iOS中使用的左手坐标系，使用的是左手坐标系，其原点在左上角。
