ios - 快速组合径向渐变

Question

想象几个径向渐变，其中一些半径分散在平面上。渐变的中心这样排列，例如:

A     D
  B 
    C
E     F

现在从每个中心出来的是具有一定半径的径向渐变。我知道如何创建渐变，但我想知道如何在重叠时组合这些渐变。

上面的排列如下图所示。正如你所看到的，(0,0)处有红色径向渐变，(3,0)处有蓝色，(1,1)处有黄色，(2,2)处有红色，等等，它们都混合在一起。此外，每个渐变都有不同的半径。

以下示例展示了以下排列中的径向渐变混合的外观:

       B


A

我试图找到有关此内容的阅读 Material ，但令人惊讶的是，点击率非常低(只有 5 或 6 个)，所有这些都是如何在 Illustrator 或 Photoshop 中执行此操作。我也尝试过自己编写程序，但问题是当涉及到梯度的交集时我不知道该怎么办；平均颜色是错误的并且结果不稳定，这就是我(相当长的)第一次尝试所做的。

如何在 Swift 中的 iOS 上实现渐变混合在一起的效果？任何建议、引用或任何都非常感谢

Answer 1

它不是 UIKit，但如果您想在 SwiftUI 中执行此操作，您可以使用带有径向渐变的矩形 ZStack 作为填充并将它们混合在一起轻松完成此操作。使用状态，您甚至可以根据自己的喜好为它们设置动画。

import SwiftUI

struct ContentView: View {
    @State var show = false

    var body: some View {
        VStack{
            ZStack{
                Rectangle()
                    .fill(Color.white)
                    .frame(width: 300, height: 200)
                Rectangle()
                    .fill(RadialGradient(gradient: Gradient(colors: [.orange, .white]), center: show ? UnitPoint(x: 0.3, y: 0.3) : UnitPoint(x: -0.3, y: -1.0), startRadius: 5, endRadius: 100))
                    .animation(.easeInOut(duration: 0.5))
                    .frame(width: 300, height: 200)
                Rectangle()
                    .fill(RadialGradient(gradient: Gradient(colors: [.yellow, .white]), center: show ? UnitPoint(x: 0.75, y: 0.75) : UnitPoint(x: 2.0, y: 2.0), startRadius: 5, endRadius: 150))
                    .animation(.easeInOut(duration: 0.5))
                    .frame(width: 300, height: 200)
                Rectangle()
                    .fill(RadialGradient(gradient: Gradient(colors: [.purple, .white]), center: show ? UnitPoint(x: 0.0, y: 0.75) : UnitPoint(x: 0.0, y: 2.0), startRadius: 5, endRadius: 100))
                    .animation(.easeInOut(duration: 0.5))
                    .frame(width: 300, height: 200)
                Rectangle()
                    .fill(RadialGradient(gradient: Gradient(colors: [.green, .white]), center: show ? UnitPoint(x: 0.75, y: 0.0) : UnitPoint(x: 1.0, y: -2.0), startRadius: 5, endRadius: 50))
                    .animation(.easeInOut(duration: 0.5))
                    .frame(width: 300, height: 200)
            }
            .blur(radius: 20)
            .blendMode(.multiply)
            .clipped()
            .cornerRadius(10)
            .shadow(color: Color.gray.opacity(0.5), radius: 5, y: 2)

            Toggle(isOn: $show) {
                Text("text")
            }
        }
    }
}