美文网首页
CAGradientLayer

CAGradientLayer

作者: 翻这个墙 | 来源:发表于2017-11-23 10:54 被阅读13次

    CAGradientLayer(渐变层)

    1. 父类是CALayer
    • 应用:需要颜色渐变效果的场景

    CAGradientLayer所有独有属性

    //渐变颜色,是一个数组,代表从xx颜色到xx颜色再到xx颜色。。。
    @property(nullable, copy) NSArray *colors;
    //设置到下一个颜色开始渐变的位置
    @property(nullable, copy) NSArray<NSNumber *> *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];
    
    }
    

    相关文章

      网友评论

          本文标题:CAGradientLayer

          本文链接:https://www.haomeiwen.com/subject/nttzvxtx.html