如何在动画过程中改变callayer的颜色

Question

我想让图层从绿色开始，然后慢慢地变成黄色，橙色，最后是红色。我该怎么做呢?

CAShapeLayer *layer = [CAShapeLayer layer];
[layer setStrokeColor:[UIColor greenColor].CGColor];
[layer setLineWidth:5.0f];
[layer setFillColor:[UIColor clearColor].CGColor];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:button.bounds cornerRadius:10.0f];
layer.path = path.CGPath;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat:1.0f];
animation.duration = 4.0f;
[layer addAnimation:animation forKey:@"myStroke"];
[button.layer addSublayer:layer];

Answer 1

我刚刚为您编写了这段代码。我使用了CAKeyframeAnimation，因为它允许多个toValues，也因为它允许对动画进行更多的控制。

//Set up layer and add it to view
CALayer *layer = [CALayer layer];
layer.frame = self.view.bounds;
[self.view.layer addSublayer:layer];
//Create animation
CAKeyframeAnimation *colorsAnimation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
colorsAnimation.values = [NSArray arrayWithObjects: (id)[UIColor greenColor].CGColor,
                          (id)[UIColor yellowColor].CGColor, (id)[UIColor orangeColor].CGColor, (id)[UIColor redColor].CGColor, nil];
colorsAnimation.keyTimes = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.25], [NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:0.75],[NSNumber numberWithFloat:1.0], nil];
colorsAnimation.calculationMode = kCAAnimationPaced;
colorsAnimation.removedOnCompletion = NO;
colorsAnimation.fillMode = kCAFillModeForwards;
colorsAnimation.duration = 3.0f;
//Add animation
[layer addAnimation:colorsAnimation forKey:nil];

Answer 2

使用CAKeyframeAnimation是可以的，但有时您需要更简单的东西。下面是如何使用CABasicAnimation和3行代码来完成它。

CABasicAnimation *colorAnimation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
colorAnimation.toValue = (id)[UIColor redColor].CGColor;
[layer addAnimation:colorAnimation forKey:nil];