我有一个自定义的UIView
类,可以在Swift 2中渲染渐变。我正在努力制作一个倾斜的渐变,以便它从左上角到右下角绘制。有人能帮我一点吗?
import UIKit
class GradientView: UIView {
let gradientLayer = CAGradientLayer()
override func awakeFromNib() {
// 1
self.backgroundColor = ColorPalette.White
// 2
gradientLayer.frame = self.bounds
// 3
let color1 = ColorPalette.GrdTop.CGColor as CGColorRef
let color2 = ColorPalette.GrdBottom.CGColor as CGColorRef
gradientLayer.colors = [color1, color2]
// 4
gradientLayer.locations = [0.0, 1.0]
// 5
self.layer.addSublayer(gradientLayer)
}
}
我怀疑这应该是其他的东西,但无论我输入什么都没有改变。
gradientLayer.locations = [0.0, 1.0]
5条答案
按热度按时间inn6fuwd1#
您不想使用
locations
来指定渐变的方向,而应该使用startPoint
和endPoint
。locations
数组用于指定渐变应该在startPoint
和endPoint
之间的哪个位置发生。例如,如果您希望颜色只在从起点到终点的中间10%范围内发生,您可以用途:locations
数组并不指定方向,而startPoint
和endPoint
指定方向。因此,对于从左上角到右下角的对角线渐变,可以将startPoint
设置为CGPoint(x: 0, y: 0)
,将endPoint
设置为CGPoint(x: 1, y: 1)
。例如:
例如:
注意,与当前问题无关:
layoutSubviews
中更新该子层的frame
,这样,当视图的bounds
发生变化时,gradientLayer
的frame
也会发生变化。但是,更好的方法是,覆盖视图的layerClass
,它不仅会为您示例化CAGradientLayer
,而且还可以随着视图大小的变化对渐变进行动态调整,特别是可以更优雅地处理动画更改。color1
和color2
,这样它们将触发渐变的更新,以便颜色的任何变化都将立即反映在视图中。@IBDesignable
,所以如果我把它放到它自己的框架中,然后在IB中添加GradientView
,我会看到在IB中呈现的效果。有关Swift 2的实现,请参见previous revision of this answer。
ds97pgxw2#
任何Angular 的渐层起点和终点
Swift 4.2、Xcode 10.0的版本
给定任意Angular ,我的代码将设置渐变层的起点和终点。
如果输入的Angular 大于 360°,则将使用除以 360 后的余数。
如果输入小于 0° 的Angular ,则将顺时针旋转方向反转
代码:
用法:
数学解释
所以我最近花了很多时间试图自己来回答这个问题。这里有一些Angular 的例子,只是为了帮助理解和形象化顺时针旋转的方向。
如果你想知道我是如何得出这个结论的,我做了一个表格,把我从 0° 到 360° 的过程形象化。
d8tt03nd3#
看起来你忘记在你的
CAGradientLayer()
上设置startPoint
了。下面的代码是你提供的代码,加上我的补充。s71maibg4#
我不知道是什么原因让你的不工作,但我确实有一个GradientView,我使用它可以是水平或垂直的,并与ui构建器的东西。请随时运行它,并根据您的需要进行改进:
5lhxktic5#
可以使用一些基本的三角函数来实现倾斜渐变,可以通过对UIView进行子类化来实现,正如我在blog post on the subject中所描述的。
首先定义一些变量:-
下面的核心函数获取单位空间中的起点和终点。
这只是取用户指定的Angular ,并使用它来创建指向该方向的矢量。Angular 指定矢量从0度开始的旋转,按照惯例,在Core Animation中指向东方,并逆时针增加(逆时针)。
相关代码的其余部分如下所示,它涉及的是这样一个事实,即结果点位于单位圆上。然而,我们需要的点位于单位正方形中:将该矢量外推到单位平方。
最后,必须从更新函数中调用所有内容:
有关完整的实现,请参阅我的blog post。