如何不断改变渐变色背景？

Question

我目前有一个渐变色背景（见下文），但我想逐渐将颜色更改为我将在数组中预先定义的阴影并让它循环播放。我怎样才能做到这一点？

var colorTop =  UIColor(red: 255.0/255.0, green: 149.0/255.0, blue: 0.0/255.0, alpha: 1.0).cgColor
var colorBottom = UIColor(red: 255.0/255.0, green: 94.0/255.0, blue: 58.0/255.0, alpha: 1.0).cgColor

func configureGradientBackground(colors:CGColor...){
    let gradient: CAGradientLayer = CAGradientLayer()
    let maxWidth = max(self.view.bounds.size.height,self.view.bounds.size.width)
    gradient.startPoint = CGPoint(x: 0, y: 0)
    gradient.endPoint = CGPoint(x: 1, y: 1)

    let squareFrame = CGRect(origin: self.view.bounds.origin, size: CGSize(width: maxWidth, height: maxWidth * 0.935))
    gradient.frame = squareFrame

    gradient.colors = colors
    view.layer.insertSublayer(gradient, at: 0)
}

override func viewDidLoad() {
    super.viewDidLoad()
    configureGradientBackground(colors: colorTop, colorBottom)
}

Answer 1

真的很简单；我无法想象你遇到了什么困难。 CAGradientLayer 的colors 属性本身是可动画的，因此您只需对colors 的变化进行动画处理，当动画结束时，继续进行colors 变化的下一个动画。

在这个例子中，我只在两组颜色之间交替，你的颜色和蓝绿色。所以我的state 是一个简单的布尔值。但显然这个例子可以扩展到任意数量的状态，即任意数量的颜色对。

let colorTop =  UIColor(red: 255.0/255.0, green: 149.0/255.0, blue: 0.0/255.0, alpha: 1.0).cgColor
let colorBottom = UIColor(red: 255.0/255.0, green: 94.0/255.0, blue: 58.0/255.0, alpha: 1.0).cgColor
var state = false
var grad : CAGradientLayer?
override func viewDidLoad() {
    // configure the gradient layer, start the animation        
}
func animate() {
    let arr = self.state ? [colorTop,colorBottom] : [UIColor.green.cgColor,UIColor.blue.cgColor]
    self.state = !self.state
    let anim = CABasicAnimation(keyPath: "colors")
    anim.duration = 10 // or whatever
    anim.fromValue = self.grad!.colors
    anim.toValue = arr
    anim.delegate = self
    self.grad?.add(anim, forKey: nil)
    DispatchQueue.main.async {
        CATransaction.setDisableActions(true)
        self.grad?.colors = arr
    }
}
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
    DispatchQueue.main.async {
        self.animate()
    }
}

Answer 2

您可以在viewDidLoad 中有一个变量，它是一个 int，用于跟踪包含所有颜色的数组的索引。例如，0 是您的第一种颜色，1 是您的第二种颜色，依此类推。然后在你的无限while循环中（也在viewDidLoad），你可以写：

if tracker == 0 {
   // apply first color
} else if tracker == 1{
   // apply second color
} ...

然后您可以在最后将跟踪器增加一，然后检查您的跟踪器是否超过了数组的大小（例如，您只有 11 种颜色）。

tracker += 1
if tracker > 10 {
   tracker = 0
}