SwiftUI之Gradient详解

本篇文章主要讲解LinearGradient,RadialGradient,RoundedRectangle这3种渐变效果,我会重点讲一下LinearGradient,包括线性渐变的原理。

示意图

本篇内容中的代码可以在这里下载https://gist.github.com/agelessman/64243e1dd89b8a1a53c094771302cdba

LinearGradient

LinearGradient称为线性渐变,在SwiftUI中,使用LinearGradient非常简单:

VStack {
    RoundedRectangle(cornerRadius: 10)
        .fill(LinearGradient(gradient: Gradient(colors: [.green, .orange, .blue]),
                             startPoint: .leading,
                             endPoint: .trailing))
    Text("LinearGradient")
}

实现线性渐变需要提供3个参数:

  • 颜色数组
  • 起点
  • 终点

我相信大家都能理解线性是什么意思,比如,从0增加到1,所谓的线性就是(0,0.1, 0.2, 0.3 ... 0.9, 1.0),这很好理解,我们使用一个线性函数来计算结果:
y = a + bx

渐变图

对于上图中的颜色渐变,颜色的rgb值需要沿着向量AB执行线性函数。在垂直方向(CD, EF, GH)的色值是相同的。

像上图这种情况,渐变的颜色超过了2种,则会分段执行渐变,在本例中,先由Green渐变到Orange,再由Orange渐变到Blue,这种渐变方式依次规则类推。

渐变的起点和终点决定了渐变向量AB的方向,如果是从左到右,计算过程如下:

Kapture 2020-07-03 at 17.39.35.gif

如果是左上到右下,过程如下:

Kapture 2020-07-03 at 17.43.12.gif

在这里就不展示其他的情况了,原理都是一样的。我们再讲一下,线性函数如何计算?

企业微信截图_b0e69c51-e0ba-4234-9d08-14f73869ed55.png

假设我们起点的rgb为(0, 255, 0),终点为(0,0, 255),则rgb各个分量的渐变为;

  • r:0 -> 0
  • g:255 -> 0
  • b:0 -> 255

我们以分量b来做简单的说明,我们只需要确定函数y=a+bx的参数就行了。

  • a等于颜色的初始值,在这里等于0
  • b等于终点减起点的值,在这里等于255-0
  • x等于渐变的进度,大家看上图,这个进度等于IJ/AB

大家明白了吗? 其实很简单,我们根据这个简单的算法,做一个尝试,如下图:

Kapture 2020-07-03 at 17.45.10.gif

核心代码如下“

ZStack(alignment: .leading) {
    RoundedRectangle(cornerRadius: 0)
        .fill(LinearGradient(gradient: .init(colors: [.green, .blue]), startPoint: /*@START_MENU_TOKEN@*/ .leading/*@END_MENU_TOKEN@*/, endPoint: /*@START_MENU_TOKEN@*/ .trailing/*@END_MENU_TOKEN@*/))
        .frame(width: 400, height: 150, alignment: /*@START_MENU_TOKEN@*/ .center/*@END_MENU_TOKEN@*/)

    RoundedRectangle(cornerRadius: 0)
        .modifier(MyAnimationModifier(pct: show ? 1 : 0, colors: colors))
        .frame(width: 20, height: 200)
        .offset(x: show ? 400 : 0, y: 0)
}

其中,这里涉及了动画相关的知识,可以在这里查看更多信息:https://juejin.im/post/5ef94bdce51d4534c4550af5。我们自定义了一个MyAnimationModifier,代码如下:

struct MyAnimationModifier: AnimatableModifier {
    var pct: Double
    let colors: [UIColor]
    
    var animatableData: Double {
        get {
            pct
        }
        set {
            pct = newValue
        }
    }
    
    func body(content: Content) -> some View {
        RoundedRectangle(cornerRadius: 0)
            .fill(color(pct))
    }
    
    func color(_ pct: Double) -> Color {
        let tmpPct = 1.0 / Double(colors.count - 1)
        let index = Int(pct / tmpPct)
        let percent = (pct - Double(index) * tmpPct) / tmpPct
        
        let color2Index = ((index + 1) >= colors.count) ? (colors.count - 1) : (index + 1)
        return colorMixer(c1: colors[index], c2: colors[color2Index], pct: CGFloat(percent))
    }
    
    func colorMixer(c1: UIColor, c2: UIColor, pct: CGFloat) -> Color {
        let rgbSpace = CGColorSpaceCreateDeviceRGB()
        guard let cc1 = c1.cgColor.converted(to: rgbSpace, intent: .defaultIntent, options: nil)?.components else {
            return Color(c1)
        }
        guard let cc2 = c2.cgColor.converted(to: rgbSpace, intent: .defaultIntent, options: nil)?.components else {
            return Color(c2)
        }
        
        let r = cc1[0] + (cc2[0] - cc1[0]) * pct
        let g = cc1[1] + (cc2[1] - cc1[1]) * pct
        let b = cc1[2] + (cc2[2] - cc1[2]) * pct
        
        return Color(red: Double(r), green: Double(g), blue: Double(b))
    }
}

其实,这里用到的颜色混淆算法是不对的,但没关系,其原理都是相似的。作为结果,上图中,实时获取的颜色跟底部的颜色也有一定的偏差。

RadialGradient

RadialGradient称为径向渐变。

企业微信截图_6d297ac1-9d8c-4fd6-ba47-44b8ffb82435.png

如上图所示,某条半径的颜色是相同的,颜色渐变的方向为AF,AD, AE等等,渐变的起点和终点需要我们设置。

AngularGradient

AngularGradient称为角度渐变。

企业微信截图_5b580b53-7d65-4baa-ac15-3369c202f908.png

如上图所示,在向量AB,AC,AD,AE等方向上颜色是相同的,渐变发生在FGH路径上,也就是说,随着角度的变化,颜色作出相应的渐变效果。

总结

非常明显,这3种渐变都依赖渐变函数,通过改变渐变方向和内在的逻辑,可以实现不同的效果。更进一步,我们可以基于这些逻辑,可以实现更丰富的渐变效果。