如何做一个动起来的渐变色


demo.gif

形如上面效果,做一个有形状的渐变色。

用到的控件:
CAGradientLayer -> 展示颜色的渐变效果
CAShapeLayer -> 完成形状部署
NSTimer -> 让颜色动起来

CAGradientLayer部分

- (void)updateCAGLayer {
    
    if (self.cgaLayer) {
        [self.cgaLayer removeFromSuperlayer];
    }
    
    CAGradientLayer *layer = [[CAGradientLayer alloc] init];
    layer.frame = self.bounds;
    layer.startPoint = CGPointMake(0, 0.5);
    layer.endPoint = CGPointMake(1, 0.5);
    
    
    NSMutableArray *colors = [[NSMutableArray alloc] init];
    for (NSInteger deg = 0; deg <= 360; deg += 5) {
        
        UIColor *color;
        color = [UIColor colorWithHue:1.0 * deg / 360.0
                           saturation:0.8
                           brightness:1.0
                                alpha:0.8];
        [colors addObject:(id)[color CGColor]];
    }
    
    layer.colors = colors;
    
    [self.layer addSublayer:layer];
    self.cgaLayer = layer;
}

CAShapeLayer部分

- (void)updateBorrowLayer {
    if (self.shapeLayer) {
        [self.shapeLayer removeFromSuperlayer];
    }
    
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    shapeLayer.frame = self.bounds;
    shapeLayer.fillColor = [UIColor whiteColor].CGColor;
    
    CGFloat heightHalf = CGRectGetHeight(shapeLayer.frame) * 0.5;
    CGFloat height = CGRectGetHeight(shapeLayer.frame);
    CGFloat width31 = CGRectGetWidth(shapeLayer.frame) * 0.33;
    CGFloat width32 = CGRectGetWidth(shapeLayer.frame) * 0.66;
    CGFloat width33 = CGRectGetWidth(shapeLayer.frame);
    UIBezierPath *bPath = [UIBezierPath bezierPath];
    
    [bPath moveToPoint:CGPointMake(0, heightHalf)];
    [bPath addLineToPoint:CGPointMake(width31, 0)];
    [bPath addLineToPoint:CGPointMake(width31, height)];
    [bPath moveToPoint:CGPointMake(width31, heightHalf)];
    [bPath addLineToPoint:CGPointMake(width32, 0)];
    [bPath addLineToPoint:CGPointMake(width32, height)];
    [bPath moveToPoint:CGPointMake(width32, heightHalf)];
    [bPath addLineToPoint:CGPointMake(width33, 0)];
    [bPath addLineToPoint:CGPointMake(width33, height)];
    shapeLayer.path = bPath.CGPath;
    [self.layer addSublayer:shapeLayer];
    self.shapeLayer = shapeLayer;

    [self.layer setMask:shapeLayer];
}

最后面mask的设置是形状显示的关键。

NSTime部分

- (void)startTimer {
    if (self.timer) return;
    self.timer = [NSTimer scheduledTimerWithTimeInterval:0.04 target:self selector:@selector(timerFunc) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)stopTimer {
    if (!self.timer) return;
    [self.timer invalidate];
    self.timer = nil;
}

// 颜色循环移动 设置颜色数组的排列
- (void)timerFunc {
    CAGradientLayer *gradientLayer = self.cgaLayer;
    NSMutableArray *copyArray = [NSMutableArray arrayWithArray:[gradientLayer colors]];
    UIColor *lastColor = [copyArray lastObject];
    [copyArray removeLastObject];
    if (lastColor) {
        [copyArray insertObject:lastColor atIndex:0];
    }
    [self.cgaLayer setColors:copyArray];
}

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

推荐阅读更多精彩内容

  • 在iOS中系统框架提供了好多方法来供我们绘图,今天我们就研究渐变色. 1 用CAGradientLayer来实现...
    进阶的蚊子阅读 9,148评论 0 9
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,196评论 4 61
  • 目录: 主要绘图框架介绍 CALayer 绘图 贝塞尔曲线-UIBezierPath CALayer子类 补充:i...
    Ryan___阅读 1,702评论 1 9
  • 今年生白发,事多压力大;好在够坚强,没被摧残倒; 每次出门多雨天,老天爱我特含蓄,用此行为拥抱我,你可知晓我怕冷?
    燚格格阅读 178评论 0 0
  • 1980年,英国彼得伯勒。一位22岁的青年和他21岁的女朋友,正进行着一场甜蜜而忧愁的异地恋。在分别的列车驶出之前...
    那一座城阅读 341评论 1 2