CATextLayer与CAGradientLayer实现文字渐变的动画效果

先上效果图=>这自己弄的gif辣眼睛 ，凑合看吧

 

1.CATextLayer的创建：

CATextLayer *textLayer = [CATextLayer layer];
textLayer.frame = CGRectMake(0, 105/2, kScreenWidth, 50);
textLayer.contentsScale = [UIScreen mainScreen].scale;
textLayer.alignmentMode = kCAAlignmentCenter;
[backView.layer addSublayer:textLayer];

textLayer.string = [self gotTextLayerAttriString:@"35个"];

CATextLayer展示文字跟Label不大一样...

 

 

 

2.创建颜色渐变层

 

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(0, 0, kScreenWidth, 155);
gradientLayer.colors = @[(id)[UIColor whiteColor].CGColor,
                         (id)[UIColor grayColor].CGColor,
                         (id)[UIColor whiteColor].CGColor
                        ];
gradientLayer.locations = @[@(0),@(0.25),@(0.4)];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 1);
gradientLayer.mask = textLayer;
[backView.layer addSublayer:gradientLayer];

3.让渐变层动起来

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"locations"];
animation.fromValue = @[@(0.1),@(0.1),@(0.1)];
animation.toValue = @[@(0.7),@(0.85),@(1.0)];
animation.duration = 1.5;
animation.autoreverses = YES;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[gradientLayer addAnimation:animation forKey:nil];