您将需要的唯一CAGradientLayer指南

Difficulty: Beginner | Easy | Normal | Challenging

难度：初学者| 容易| 普通 | 具有挑战性的

This article has been developed using Xcode 11.4.1, and Swift 5.2.2

本文是使用Xcode 11.4.1和Swift 5.2.2开发的。

Wouldn’t it be great if someone gave you an article that explained much about CAGradientLayer, and even created an App that enables you to experiment with the same? This article is just that. You’re welcome.

如果有人给您提供了一篇对CAGradientLayer很多解释的文章，甚至创建了一个使您可以进行相同实验的应用，这不是很好吗？ 这篇文章就是这样。 别客气。

先决条件： (Prerequisites:)

• You will be expected to be aware how to make a Single View Application in Swift

  您应该知道如何在Swift中制作Single View应用程序

术语： (Terminology:)

CAGradientLayer: A layer that draws a colour gradient over any background colour

CAGradientLayer：在任何背景颜色上绘制颜色渐变的图层

应用程式 (The App)

The images used in this article are form a little App that has been knocked up. You can download it from the repo, and essentially I’d recommend you do.

本文中使用的图像是一个已被删除的小应用程序。 您可以从repo下载它，基本上我建议您这样做。

Essentially the App shows what can be changed in respect of a CAGradientLayer — the locations, StartPoint, EndPoint and colours.

本质上，应用程序显示了可以在一个方面来改变CAGradientLayer -地点， StartPoint ， EndPoint和颜色。

so let us look at this App in stages.

因此，让我们分阶段看一下这个应用程序。

*Notes*

*笔记*

Core Graphics speaks in Core Graphics- that means that colours are the CG variants rather than the UIColor variants. This means that in this App we have an array of UIColor, and then map this to the requisite array of cgColor. You know, something like:

Core Graphics用Core Graphics来表示-这意味着颜色是CG变体，而不是UIColor变体。 这意味着在此应用程序中，我们有一个UIColor数组，然后将其映射到cgColor必需的数组。 您知道，类似：

gradient.colors = colours.map{ $0.cgColor }

Animations have been used for the gradient, let me give you an example of this:

动画已用于渐变，让我举一个例子：

let animation = CABasicAnimation(keyPath: "endPoint")animation.fromValue = gradient.endPointanimation.toValue = endPoint.pointanimation.duration = 5.0self.gradient.endPoint = endPoint.pointself.gradient.add(animation, forKey:"animateendpoint")

using CABasicAnimation (here for endPoint) makes it very obvious the value we are moving *from* and the value we are moving *to* — but here is the secret sauce — you need to make sure that after the fromValue and toValue that the actual (in this case) endPoint is set (if not the gradient will just flash back and go back to the previous state!).

使用CABasicAnimation (此处为端点)，使得它很明显我们正在从移动*值和价值，我们正在* 至 * -但这里的秘密武器-你需要确保后fromValue和toValue实际(在这种情况下)设置了endPoint (如果未设置，则渐变将仅闪回并返回到先前的状态！)。

Let us look through these properties

让我们看一下这些属性

位置(与颜色相关) (location (which is linked to colour))

Location is a value between 0 and 1, and provide a separation between colour spaces (so the number of locations are tightly coupled to the colours).

位置是一个介于0和1之间的值，并在颜色空间之间提供分隔(因此位置的数量与颜色紧密相关)。

So if we don’t have a location, we are left with a solid colour.

因此，如果我们没有位置，则会留下单色。

If we set a single location at 0.25, two colours will blend 25% of the way through the colour

如果我们将单个位置设置为0.25，则两种颜色将混合整个颜色的25％

If we have two locations, one at 0.25 and one at 0.5 one colour will begin to change at 0.25, one at 0.5

如果我们有两个位置，一个位于0.25，另一个位于0.5，则一种颜色将在0.25处开始变化，一个在0.5处开始变化。

Likewise three locations, 0.25, 0.5 and 0.75 will change the colours at those, well, locations

同样，三个位置0.25、0.5和0.75会改变这些位置的颜色

startPoint和endPoint (startPoint and endPoint)

The start point is where the gradient starts, within the bounds of the `layer` coordinate space.

起点是渐变在“层”坐标空间范围内开始的位置。

The best explaination? A showing the different values and animate it.

最好的解释？ 显示不同值并为其设置动画的。

Clear? If not download the App from the repo.

明确？ 如果没有，请从仓库下载该应用程序。

类型 (Type)

Not captured in this App (apart from the default axial type), you can choose conic and radial are fairly self-explanatory.

在此应用程序中未捕获(除了默认的axial类型)，您可以选择conic和radial是不言自明的。

重新创建应用程序的提示 (Tips to recreate the App)

• I used two tableviews in one view controller

  我在一个视图控制器中使用了两个表视图

• The colour picker uses delegation

  拾色器使用委托

结论 (Conclusion)

Gradients are extremely important in iOS, and you might just have a live designer who goes all in on the style.

渐变在iOS中极为重要，您可能只有一位现场设计师才能全力以赴。

What are you to do? Well, we can resolve this by creating a great App, and using the knowledge that we have gained from this article.

你要做什么 好吧，我们可以通过创建一个出色的App并利用从本文中获得的知识来解决此问题。

Which I hope has been helpful for you.

希望对您有所帮助。

If you’ve any questions, comments or suggestions please hit me up on Twitter

如果您有任何疑问，意见或建议，请在Twitter上打我

翻译自: https://medium.com/@stevenpcurtis.sc/the-only-cagradientlayer-guide-you-will-ever-need-ab882e36b754