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

Posted 2023-02-23

【中文标题】如何不断改变渐变色背景？

【英文标题】：How to continually change gradient color background?

【发布时间】：2016-12-29 03:17:14

【问题描述】：

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

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)

【参考方案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()
    

【参考方案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

【讨论】：

但这不会给我留下不断更新颜色的问题吗？我尝试通过再次调用 configureGradientBackground 并实现新颜色来更改渐变颜色，但它不会更新颜色； + 我想以某种方式为过渡设置动画，以便它是一种干净的颜色变化；有什么想法吗？

但这不会更新颜色；因为当我调用一些东西来改变渐变的值时，它不会更新屏幕上的颜色

对于无限循环，您可以使用具有更新颜色的适当功能的计时器对象：weheartswift.com/nstimer-in-swift

但是如何更新背景颜色呢？在示例中，它只是为字符串更新它，但对于背景颜色，它不是不同吗？