Question

我们的导航栏使用CAGradientLayer来产生渐变效果。现在我们要渐变颜色动态变化

我们使用以下代码实现渐变效果

let gradientLayer = CAGradientLayer()
        var updatedFrame = self.navigationController!.navigationBar.bounds
        updatedFrame.size.height += UIApplication.shared.statusBarFrame.size.height
        gradientLayer.frame = updatedFrame
        gradientLayer.colors = [UIColor.green.cgColor, UIColor.blue.cgColor] // start color and end color

        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0) // Horizontal gradient start
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0) // Horizontal gradient end

        UIGraphicsBeginImageContext(gradientLayer.bounds.size)
        gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        self.navigationController!.navigationBar.setBackgroundImage(image, for: UIBarMetrics.default)

我们尝试在此图层上添加动画，但是不起作用

 let animation = CABasicAnimation(keyPath: "locations")
        animation.fromValue = [0,0.5]
        animation.toValue = [0,0.9]
        animation.autoreverses = true
        animation.repeatCount = Float.infinity
        gradientLayer.add(animation,forKey: nil)

我注意到，这种设置渐变颜色的方法实际上是在设置背景图像。我认为这是动画无法正常工作的原因，因为设置图像是一种原子动作。

我在寻找其他方法来设置渐变效果，但是没有运气。那么可以在导航栏上实现渐变效果动画吗？

Answer 1

我仍然没有办法为导航栏的CAGradientLayer设置动画。但是，如果您只是想简单地在导航栏上添加动画，而不关心它是否真的是导航栏的一部分，那么我找到了一种解决方法。

我没有更改导航栏的图层，而是在导航栏后面放置了一个UIView，该图层的图层具有渐变动画。

// create a view
// set its size the same as the navigation bar
let gradientView = UIView(frame: CGRect(x:0,y:0,width:self.navigationController!.navigationBar.frame.size.width,height:(self.navigationController!.navigationBar.frame.size.height+UIApplication.shared.statusBarFrame.height)))
view.addSubview(gradientView)

// add animation on this view
let anAnimation = CABasicAnimation(keyPath: "backgroundColor")
anAnimation.duration = 1.5;
anAnimation.repeatCount = 1;
anAnimation.autoreverses = false;
animation.fromValue = [0,0.5]
animation.toValue = [0,0.9]
gradientView.layer.add(anAnimation,forKey: "backgroundColor")

// hide the navigation bar's background image
self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

就像在导航栏上添加动画一样（实际上不是）。

如何为导航栏的CAGradientLayer设置动画

1 个答案: