折叠图片

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中使用的左手坐标系,使用的是左手坐标系,其原点在左上角。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容