CAGradientLayer 动画“颜色”而不是“位置”

Question

我正在尝试使用 CABasicAnimation 为 CAGradientLayer 的位置数组设置动画。文档说这是可行的。我正在使用以下代码：

CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"locations"];
fadeAnim.fromValue = _gradientLayer.locations;
fadeAnim.toValue = @[[NSNumber numberWithFloat:0.8f], [NSNumber numberWithFloat:1.0f]];
fadeAnim.duration = 3.0;
fadeAnim.delegate = self;
[fadeAnim setFillMode:kCAFillModeForwards];
[fadeAnim setDuration:3.0f];
[fadeAnim setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];

[_gradientLayer addAnimation:fadeAnim forKey:@"animation"];

现在，我认为这可能是一个奇怪的图层/子图层案例，所以我添加了以下代码来为颜色设置动画

CABasicAnimation* fadeAnim1 = [CABasicAnimation animationWithKeyPath:@"colors"];
fadeAnim1.toValue = @[(id)[UIColor greenColor].CGColor,(id)[transparentColor CGColor],(id)[UIColor blueColor].CGColor];
fadeAnim1.duration = 5.0;
[_gradientLayer addAnimation:fadeAnim1 forKey:@"colorAnimation"];

颜色动画很好，并且在调用第一个位置动画的委托时。

NSString *keyPath = ((CAPropertyAnimation *)anim).keyPath;
if ([keyPath isEqualToString:@"locations"]) {
    _gradientLayer.locations = ((CABasicAnimation *)anim).toValue;
}

正确设置位置的最终状态，但没有动画

Answer 1

我下载了您的示例项目并查看了。

它有两个问题：

1. locations数组中的对象数量必须与数组中的对象数量相同colours。在您的示例中，您有三种颜色和两个位置，因此核心动画无法计算要执行的正确动画。所以我更新了以下几行：

   NSArray * startingLocations = @[[NSNumber numberWithFloat:0.0f], [NSNumber numberWithFloat:0.4f],[NSNumber numberWithFloat:1.0f]];
   

   和

   fadeAnim.toValue = @[[NSNumber numberWithFloat:0.0f],[NSNumber numberWithFloat:0.8f], [NSNumber numberWithFloat:1.0f]];
   

   这是您的位置没有动画的主要原因

2. 动画中还有一些不必要的复杂性。这里解释得很好，但在这种情况下你不需要填充模式或委托。您将您的位置设置为最终值（这会更新模型层，但会创建一个隐式动画）。然后，您使用相同的键（在您的情况下，位置）创建一个显式动画，并将 from 值设置为您的开始数组。这会覆盖隐式动画。

我修改后的动画代码是这样的：

//Create gradient layer
_gradientLayer = [CAGradientLayer layer];
_gradientLayer.frame = maskedImageView.bounds;
_gradientLayer.colors = colors;

//set locations for the colors
NSArray * startingLocations = @[@0.0, @0.4,@1.0];
NSArray *endinglocations = @[@0.0,@0.8,@1.0];

// Update the model layer to the final point
_gradientLayer.locations = endinglocations;
_gradientLayer.startPoint = CGPointMake(0.0f, 0.3f);
_gradientLayer.endPoint = CGPointMake(1.0f, 0.5f);

//add the text image as a mask on the gradient layer
_gradientLayer.mask = maskedImageView.layer;

//add the gradient layer to the holder view
[_slideImageView.layer addSublayer:_gradientLayer];

//Create animation for the "locations" aspect of the gradient layer
CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"locations"];
//Set the starting locations to the previously applied array
fadeAnim.fromValue = startingLocations;

// 3 seconds of run time
[fadeAnim setDuration:3.0f];

//linear and straight timing since we want it smooth
[fadeAnim setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];

//do the magic and apply the animation
[_gradientLayer addAnimation:fadeAnim forKey:@"locations"];