objective-c - 圆形 CALayer 周围的边框较深

Question

我正在创建一个自定义 View 来显示单一颜色，它用于图像中的颜色选择器，因此颜色可能会很快改变。为了防止颜色在光标移动时闪烁，我已经做到了，所以颜色变化会在 0.2 秒内动画化。

我正在使用 CALayer 执行此操作。目前这几乎可以按预期工作，但是，我想要图层周围的轮廓，其颜色比内容稍深，类似于 OS X Yosemite 关闭和调整窗口大小按钮。

我目前使用的方法确实有效，但是，有时边框颜色动画似乎不遵循主要颜色动画，有时它会经过较浅的颜色。我以为我可以用过滤器来做到这一点，但我完全不知道如何做到这一点，我无法在网上找到很多文档。我对 CoreAnimation 的经验很少，所以我不确定这是否是最好的方法，或者它是否显而易见。

- (id)initWithFrame:(NSRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        _pickerColour = [NSColor whiteColor];
        strokeColour = [NSColor whiteColor];

        [self setWantsLayer: true];

        innerLayer = [CALayer layer];
        [innerLayer setCornerRadius: frame.size.width / 2];
        [innerLayer setBorderWidth: 4];
        [innerLayer setFrame: CGRectMake(frame.origin.x - frame.size.width / 2, frame.origin.y - frame.size.width / 2, frame.size.width - 2, frame.size.height - 2)];

        [self.layer addSublayer:innerLayer];
    }

    return self;
}

- (void) setPickerColour:(NSColor *)pickerColour{
    CABasicAnimation *backgroundAnimation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    backgroundAnimation.fillMode = kCAFillModeForwards;
    backgroundAnimation.removedOnCompletion = NO;
    backgroundAnimation.fromValue = (id)self.pickerColour.CGColor;
    backgroundAnimation.toValue = (id)pickerColour.CGColor;
    backgroundAnimation.duration = 0.1f;
    [innerLayer addAnimation:backgroundAnimation forKey:@"backgroundColor"];

    CGFloat h,s,b,a;
    [[self.pickerColour colorUsingColorSpaceName: NSCalibratedRGBColorSpace] getHue:&h saturation:&s brightness:&b alpha:&a];
    NSColor *newStrokeColour = [NSColor colorWithHue:h saturation:MIN(s, 1.0) brightness: MAX(b / 1.2, 0.0) alpha:a];

    CABasicAnimation *borderAnimation = [CABasicAnimation animationWithKeyPath:@"borderColor"];
    borderAnimation.fillMode = kCAFillModeForwards;
    borderAnimation.removedOnCompletion = NO;
    borderAnimation.fromValue = (id)strokeColour.CGColor;
    borderAnimation.toValue = (id)newStrokeColour.CGColor;
    borderAnimation.duration = 0.1f;
    [innerLayer addAnimation:borderAnimation forKey:@"borderColor"];

    strokeColour = newStrokeColour;
    _pickerColour = pickerColour;
}

- (NSColor *) pickerColour{
    return _pickerColour;
}

Answer 1

通过使用 CAKeyframeAnimation 而不是 CABasicAnimation，您可以提供包含分段的 values 和 keyTimes 数组通过色彩空间表示您的路径。您可以使用与您正在使用的相同的 NSColor 便捷方法，但您将指定足够数量的颜色以遵循 HSV 空间中所需的弧线，而不是通过 RGB 空间的默认线性轨迹。