如何创建渐变色

Question

我有这段代码用于创建渐变背景：

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.bounds;
UIColor *startColour = [UIColor colorWithHexString:@"#bcdef6"];
UIColor *endColour = [UIColor colorWithHexString:@"#fad7e6"];
UIColor *middleColor = [UIColor colorWithHexString:@"#ffffff"];

gradient.colors = [NSArray arrayWithObjects:(id)[startColour CGColor],(id)middleColor, (id)[endColour CGColor], nil];
gradient.endPoint = CGPointMake(1, 0);
gradient.startPoint = CGPointMake(0, 1);
[self.layer insertSublayer:gradient atIndex:0];

如何消除中间的灰色效果？

这是期望的结果：

这是实际结果：

- Lena Bru

Answer 1

我发现你的颜色数组有一个错误，你没有获取中间颜色（白色）的CGColor。通过将数组更改为以下内容，我可以得到你想要的结果。

gradient.colors = @[(id)startColour.CGColor, (id)middleColor.CGColor, (id)endColour.CGColor];

通过调整渐变位置，您还可以看到更多的蓝色和粉色，从而创造出更好的效果。

gradient.locations = @[@0.2f, @0.5f, @0.8f];

- Tim Edwards

---

位置是渐变停止点，介于0.0和1.0之间，就像在渐变距离上的百分比一样。因此，它不是在0到50％之间开始混合蓝色和白色，而是只在20％到50％之间混合，使前20％仍然是蓝色。根据文档，“渐变停止点被指定为0到1之间的值。这些值必须单调递增。如果为nil，则停止点在范围内均匀分布。默认为nil。在呈现时，颜色在被插值之前被映射到输出颜色空间。” - Tim Edwards

是的，在左下角它将是蓝色的，只有在沿对角线线路20%的距离处，蓝色才开始与白色混合。通过更改渐变停止位置，您可以缩短或延长颜色混合的距离。将0.2更改为0.4，您就会明白我的意思。 - Tim Edwards

是否可以更改白色条纹的角度？让它不再从左上角到右下角，而是从左上角+20像素到右下角-20像素？ - Lena Bru

不要使用单一的线性渐变。那将涉及到自定义绘图。 - Tim Edwards

我使用3D平移变换来修正渐变层的角度，并使该层比其所设置的视图稍大。 - Lena Bru