CAGradientLayer

CAGradientLayer（渐变层）

1. 父类是CALayer

• 应用：需要颜色渐变效果的场景

CAGradientLayer所有独有属性

//渐变颜色，是一个数组，代表从xx颜色到xx颜色再到xx颜色。。。
@property(nullable, copy) NSArray *colors;
//设置到下一个颜色开始渐变的位置
@property(nullable, copy) NSArray *locations;

//渐变方向
//渐变开始点（取值是0~1）
@property CGPoint startPoint;
//渐变结束点（取值是0~1）
@property CGPoint endPoint;

//类型，目前之前“轴向”这种类型，默认
@property(copy) NSString *type;

@end

CAGradientLayer实现折叠效果

• 实现步骤：
  1. 组合两张相同的图片在同一个位置（即position一样），分别只显示上部与下部，通过锚点，实现两张图片各显示一半而在视觉上组合成一张图片
  2. 在组合图片上覆盖一个颜色为clearColor，等大的view，在其上增加拖动手势，实现折叠，阴影，渐变，近大远小立体效果，还原时弹簧效果；新增一个view的原因是这样才能实现完整的折叠效果，若放在上部图片上，由于其在旋转过程中，导致有些位置已经不能响应事件，继续拖动（请发挥想象力）

@interface ViewController ()

//上部图片
@property (weak, nonatomic) IBOutlet UIImageView *topView;
//下部图片
@property (weak, nonatomic) IBOutlet UIImageView *bottomView;

//渐变层
@property (nonatomic, weak) CAGradientLayer *layer;
@end

@implementation ViewController
//拖动时实现折叠，渐变，近大远小立体效果

- (IBAction)pan:(UIPanGestureRecognizer *)sender {

    // 获取当前手指的偏移量
    CGPoint transP = [sender translationInView:sender.view];

    // 计算下旋转的角度
    CGFloat angle = -transP.y / 200.0 * M_PI;//注意是负值，逆时针旋转

    // 描述有立体感的形变
    CATransform3D transform = CATransform3DIdentity;//清空形变

    // 添加立体感,设置形变的M34,什么是立体感,近大远小
    // -1 / d, d表示我们的眼睛离手机屏幕的位置
    transform.m34 = -1 / 400.0;

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

    _topView.layer.transform = transform;

    // 设置阴影
    _layer.opacity = transP.y / 200.0;

    if (sender.state == UIGestureRecognizerStateEnded) { // 手指抬起

        // 隐藏阴影
        _layer.opacity = 0;

        //实现松手时反弹效果
        // Damping:弹性系数 值越小 弹簧效果越明显
        // initialSpringVelocity:弹簧效果的初始化速度
        // options;动画执行过程
        [UIView animateWithDuration:.9 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            // 动画代码
            // 还原顶部的形变
            _topView.layer.transform = CATransform3DIdentity;
        } completion:^(BOOL finished) {
        }];
    }
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // 设置顶部视图只显示图片的上部分内容
    // 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);

    // 给下部分view添加阴影

    // 渐变层
    CAGradientLayer *layer = [CAGradientLayer layer];

    layer.frame = _bottomView.bounds;

    // 设置渐变颜色
    layer.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];

    // 设置不透明 0 : 透明
    layer.opacity = 0;

    // 设置到下一个颜色开始渐变的位置
//    layer.locations = @[@0.2,@0.2];

    // 设置渐变的方向
//    layer.startPoint = CGPointMake(0, 0);
//    layer.endPoint = CGPointMake(1, 1);
    _layer = layer;

    [_bottomView.layer addSublayer:layer];

}