在具有多个部分的 tableView 中滚动时使用平滑动画更改视图背景渐变颜色

Posted 2023-03-10

【中文标题】在具有多个部分的 tableView 中滚动时使用平滑动画更改视图背景渐变颜色

【英文标题】：Change view background gradient color with smooth animation while scrolling in tableView with multiple section

【发布时间】：2018-01-25 05:34:56

【问题描述】：

我的 UITableView 中有多个部分，我想更改我的视图 背景颜色作为渐变颜色，平滑过渡，同时 滚动表视图。

当新部分出现在 tableView 中时，更改视图背景颜色 顺利。

我怎样才能实现这种动画？

我的代码在下面，用于更改背景颜色但不流畅

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) 
        switch section 
        case 0:
                self.view.backgroundColor = UIColor.cyan
            break
        case 1:
               self.view.backgroundColor = UIColor.red
            break
        case 2:
               self.view.backgroundColor = UIColor.green
            break
        case 3:
               self.view.backgroundColor = UIColor.blue
            break
        case 4:
               self.view.backgroundColor = UIColor.brown
            break
        default:
              self.view.backgroundColor = UIColor.brown
            break
        
    

【问题讨论】：

请附上您当前的代码、截图。这个问题好像不清楚

我不确定。尝试在动画块中添加这种颜色变化并将动画块中的 alpha 更改为 0.5 到 1。这应该会给你那种效果。如果没有，您可以在这里使用图层。

是的，但是当我添加动画块时，它工作不顺利

【参考方案1】：

您可以尝试使用此代码。

func tableView(_ tableView: UITableView, willDisplayHeaderView view: 
UIView, forSection section: Int) 

    switch section 
    case 0:
        UIView.animate(withDuration: 0.5, delay: 0.0, options: [.curveEaseIn, .curveEaseOut, .allowUserInteraction], animations: () -> Void in
            self.view.backgroundColor = UIColor.cyan.withAlphaComponent(0.4)

        )

    case 1:
        UIView.animate(withDuration: 0.5, delay: 0.0, options: [.curveEaseIn, .curveEaseOut, .allowUserInteraction], animations: () -> Void in
            self.view.backgroundColor = UIColor.green.withAlphaComponent(0.4)

        )

    case 2:
        UIView.animate(withDuration: 0.5, delay: 0.0, options: [.curveEaseIn, .curveEaseOut, .allowUserInteraction], animations: () -> Void in
            self.view.backgroundColor = UIColor.yellow.withAlphaComponent(0.4)

        )

    case 3:
        UIView.animate(withDuration: 0.5, delay: 0.0, options: [.curveEaseIn, .curveEaseOut, .allowUserInteraction], animations: () -> Void in
            self.view.backgroundColor = UIColor.orange.withAlphaComponent(0.4)

        )

    case 4:
        UIView.animate(withDuration: 0.5, delay: 0.0, options: [.curveEaseIn, .curveEaseOut, .allowUserInteraction], animations: () -> Void in
            self.view.backgroundColor = UIColor.magenta.withAlphaComponent(0.4)

        )

    default:
        self.view.backgroundColor = UIColor.brown

    

【讨论】：

如何在所有部分设置渐变色而不是简单的 UIColor ？

可以使用单个函数以更优化的方式编写代码，而不是重复动画代码，这里可以应用代码重构。

@vaibhav 是的，可以写成更优化的方式。但我不是来优化代码的。

好的，我们在这里的目的是为操作提供更好的答案。

您所说的解决方案只会删除重复的代码。它不会改变代码的复杂性。因此，如果您不删除它，那么它也可以正常工作。

【参考方案2】：

您可以使用此代码平滑地更改视图渐变颜色 -

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) 
    for layer in self.view.layer.sublayers! 
        if layer .isKind(of: CAGradientLayer.self) 
            layer.removeFromSuperlayer()
        
    
    let gradient = CAGradientLayer()
    gradient.frame = self.view.bounds
    gradient.colors = [self.generateRandomColor().cgColor, self.generateRandomColor().cgColor]
    let anim:CABasicAnimation = CABasicAnimation.init(keyPath: "opacity")
    anim.fromValue = 0.5
    anim.toValue = 1
    anim.duration = 1.0
    gradient.add(anim, forKey: "opacity")
    self.view.layer.addSublayer(gradient)
    self.view.layoutIfNeeded()


func generateRandomColor() -> UIColor 
    let hue : CGFloat = CGFloat(arc4random() % 256) / 256 + 0.5
    let saturation : CGFloat = CGFloat(arc4random() % 128) / 256 + 0.5
    let brightness : CGFloat = CGFloat(arc4random() % 128) / 256 + 0.5
    return UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: 0.5)

【讨论】：

是的，这很好，但是如何设置渐变颜色而不是 UICoor

你需要添加渐变层。为此