iOS 文字发光滚动

iOS 文字发光滚动_第1张图片
颜色滚动

老规矩直接上图片,贴代码:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(0, 300, 50, 30);
    [gradientLayer setStartPoint:CGPointMake(0.0, 0.0)];
    [gradientLayer setEndPoint:CGPointMake(1.0, 0.0)];
    gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor];
    
    UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 300, 500, 30)];
    label1.text = @"超变态的需求但是我牛逼啊";
    label1.font = [UIFont boldSystemFontOfSize:30];
    label1.backgroundColor = [UIColor clearColor];
    [self.view addSubview:label1];
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 500, 30)];
    label.text = @"超变态的需求但是我牛逼啊";
    label.font = [UIFont boldSystemFontOfSize:30];
    label.backgroundColor = [UIColor clearColor];
    [self.view addSubview:label];
    [self.view.layer addSublayer:gradientLayer];
    gradientLayer.mask = label.layer;

CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position.x"];
    basicAnimation.duration = 5.0;
    basicAnimation.fromValue = @(gradientLayer.position.x);
    basicAnimation.toValue = @(gradientLayer.position.x + 500);
    basicAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    basicAnimation.repeatCount = MAXFLOAT;
    basicAnimation.removedOnCompletion = NO;
    basicAnimation.fillMode = kCAFillModeForwards;
    [gradientLayer addAnimation:basicAnimation forKey:nil];
    CABasicAnimation *basicAnimation2 = [CABasicAnimation animationWithKeyPath:@"position.x"];
    basicAnimation2.duration = 5.0;
    basicAnimation2.fromValue = @(label.layer.position.x);
    basicAnimation2.toValue = @(label.layer.position.x - 500);
    basicAnimation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    basicAnimation2.repeatCount = MAXFLOAT;
    basicAnimation2.removedOnCompletion = NO;
    basicAnimation2.fillMode = kCAFillModeForwards;
    [label.layer addAnimation:basicAnimation2 forKey:nil];
}
iOS 文字发光滚动_第2张图片
2.gif

但是要求颜色是斜的,上代码:

- (void)viewDidLoad {
    [super viewDidLoad];

    UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 300, 500, 30)];
    label1.text = @"超变态的需求但是我牛逼啊";
    label1.font = [UIFont boldSystemFontOfSize:30];
    label1.backgroundColor = [UIColor clearColor];
    [self.view addSubview:label1];
    
    [self drawPath];
    self.imageV.frame = CGRectMake(0, 300, 200, 100);
    [self.view addSubview:self.imageV];
    
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 500, 30)];
    label.text = @"超变态的需求但是我牛逼啊";
    label.font = [UIFont boldSystemFontOfSize:30];
    label.backgroundColor = [UIColor clearColor];
    [self.view addSubview:label];
    
    self.imageV.layer.mask = label.layer;
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position.x"];
    basicAnimation.duration = 5.0;
    basicAnimation.fromValue = @(self.imageV.layer.position.x);
    basicAnimation.toValue = @(self.imageV.layer.position.x + 500);
    basicAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    basicAnimation.repeatCount = MAXFLOAT;
    basicAnimation.removedOnCompletion = NO;
    basicAnimation.fillMode = kCAFillModeForwards;
    [self.imageV.layer addAnimation:basicAnimation forKey:nil];
    CABasicAnimation *basicAnimation2 = [CABasicAnimation animationWithKeyPath:@"position.x"];
    basicAnimation2.duration = 5.0;
    basicAnimation2.fromValue = @(label.layer.position.x);
    basicAnimation2.toValue = @(label.layer.position.x - 500);
    basicAnimation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    basicAnimation2.repeatCount = MAXFLOAT;
    basicAnimation2.removedOnCompletion = NO;
    basicAnimation2.fillMode = kCAFillModeForwards;
    [label.layer addAnimation:basicAnimation2 forKey:nil];
}

- (void)drawLinearGradient:(CGContextRef)context
                      path:(CGPathRef)path
                startColor:(CGColorRef)startColor
                  endColor:(CGColorRef)endColor
{
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = { 0.0, 1.0 };
    
    NSArray *colors = @[(__bridge id) startColor, (__bridge id) endColor];
    
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);
    
    
    CGRect pathRect = CGPathGetBoundingBox(path);
    
    //具体方向可根据需求修改
    CGPoint startPoint = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMidY(pathRect));
    CGPoint endPoint = CGPointMake(CGRectGetMaxX(pathRect), CGRectGetMidY(pathRect));
    
    CGContextSaveGState(context);
    CGContextAddPath(context, path);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    CGContextRestoreGState(context);
    
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}

- (void)drawPath {
    //创建CGContextRef
    UIGraphicsBeginImageContext(self.view.bounds.size);
    CGContextRef gc = UIGraphicsGetCurrentContext();
    
    //创建CGMutablePathRef
    CGMutablePathRef path = CGPathCreateMutable();
    
    //绘制Path
    CGPathMoveToPoint(path, NULL, 0, 0);
    CGPathAddLineToPoint(path, NULL, 100, 0);
    CGPathAddLineToPoint(path, NULL, 150, 900);
    CGPathAddLineToPoint(path, NULL, 50, 900);
    CGPathAddLineToPoint(path, NULL, 0, 0);
    CGPathCloseSubpath(path);
    
    //绘制渐变
    [self drawLinearGradient:gc path:path startColor:[UIColor greenColor].CGColor endColor:[UIColor redColor].CGColor];
    
    //注意释放CGMutablePathRef
    CGPathRelease(path);
    
    //从Context中获取图像,并显示在界面上
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    self.imageV = [[UIImageView alloc] initWithImage:img];

}

叫UI给你切一张斜的颜色图片是最方便的,我这边自己手动画了一张渐变图片,所以代码多了点。

总结

刚拿到这需求,想到了以前读的SVProgressHub刷新圈圈的实现原理,是通过 layer的mask。所以按着这个方向一直走下去,发现layer的强大,哈哈,好多东西都不太懂,知识点朦朦胧胧的。当然,现在也还是不太懂哈~ 学了就忘,忘了到时候再学咯~

-----发现一个更简单的方案,他是改变gradientLayer的locations,这样就不需要2层lable了。
https://github.com/imjog/AnimatedMaskLabel

你可能感兴趣的:(iOS 文字发光滚动)