使用滑块实时更改 CAGradientLayer 的颜色

Question

我希望能够实时更改 CAGradientLayer 的颜色，我在主 ViewController 中接收到 @IBAction 的值。 UISlider 移动，背景颜色变化。我要求的是理论方法。

用于实现此目的的模式或技术是什么？我真的迷路了，强大的互联网没有提供任何有用的帮助。

子类化 UIView 并在其中添加 gradientLayer？然后用传入的值观察变量，让 KVO 用 cgColor 值更新数组条目（颜色集） ?
实例化主 ViewController 中的 gradientLayer 并在通过 @IBAction ?
[ 传入值更改时更新其颜色属性=33=]

代码有帮助，但在这里是次要的。我要求更多的理论解决方案。我尝试遵循 MVC，但我几乎不知道 gradientLayer 应该在哪里实例化，动态更改颜色等的最佳方法是什么…… 开放输入，thx

Answer 1

使用一个非常简单的 UIView 扩展，您可以获得所需的东西。这是一个使用半静态颜色的简单示例，只是为了简单起见，但您可以根据需要扩展它。

extension UIView {
    /**
     Adds colors to a CAGradient Layer.
     - Parameter value: The Float coming from the slider.
     - Parameter gradientLayer: The CAGradientLayer to change the colors.
     */
    func addColorGradient (value: CGFloat, gradientLayer: CAGradientLayer) {
        let topColor = UIColor(red: value / 255, green: 1, blue: 1, alpha: 1)
        let bottomColor = UIColor(red: 1, green: 1, blue: value / 255, alpha: 1)
        gradientLayer.colors = [topColor.cgColor, bottomColor.cgColor]
    }
}

用法示例：

import UIKit

class ViewController: UIViewController {

    let slider : UISlider = {
        let slider = UISlider(frame: .zero)
        slider.maximumValue = 255
        slider.minimumValue = 0.0
        return slider
    }()

    var gradientLayer = CAGradientLayer()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addSubview(slider)
        slider.translatesAutoresizingMaskIntoConstraints = false
        slider.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
        slider.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        slider.widthAnchor.constraint(equalToConstant: 200).isActive = true
        slider.heightAnchor.constraint(equalToConstant: 20).isActive = true
        slider.addTarget(self, action: #selector(sliderValueChanged), for: .valueChanged)
        gradientLayer.bounds = self.view.bounds
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }

    @objc func sliderValueChanged(sender: UISlider) {
        let currentValue = CGFloat(sender.value)
        self.view.addColorGradient(value: currentValue, gradientLayer: gradientLayer)
    }

}

只需根据需要更改 topColor 和 bottomColor 并使用滑块操纵它们的值。希望对你有帮助

Answer 2

class ViewController: UIViewController {

    var gradientLayer = CAGradientLayer()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        gradientLayer.bounds = self.view.bounds
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }

    // Slider Input
    @IBAction func sliderValueChanged(_ sender: UISlider) {
        self.view.addColorGradient(value: CGFloat(sender.value), gradientLayer: gradientLayer)
    }
}

使用滑块实时更改 CAGradientLayer 的颜色

Change the colors of CAGradientLayer with slider in realtime

ios

cagradientlayer

swift