Animation not working on inserted CAGradientLayer as sublayer - ios

Question

I want to perform animation(full view height to 88px height, bottom to top animation) when viewController is loaded. So I have added a UIView(animationView)on the storyboard, added gradient programmatically in viewDidLoad() and performed animation in viewDidAppear() as follows:
override func viewDidLoad() {
super.viewDidLoad()
self.animationView.applyGradient(with: [UIColor(red: 0, green: 91/255, blue: 200/255, alpha: 1), UIColor(red: 0, green: 131/255, blue: 232/255, alpha: 1)])
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
//Perform animation
self.animationVWBottomContraint.constant = self.view.bounds.height - 88.0
UIView.animate(withDuration: 0.75,delay: 10, options: .curveEaseIn, animations: {
self.view.layoutIfNeeded()
}, completion: {(_) in
DispatchQueue.main.asyncAfter(deadline: .now()+6) {
self.animationView.isHidden = true
}
}
extension UIView {
open func applyGradient(with colours: [UIColor]) {
//Create a gradient and apply it to the sublayer.
let gradient = CAGradientLayer()
gradient.frame = self.bounds
gradient.name = "grad1"
gradient.colors = colours.map { $0.cgColor }
gradient.startPoint = CGPoint(x: 0.0,y: 0.0)
gradient.endPoint = CGPoint(x: 0.0,y: 1.0)
self.layer.insertSublayer(gradient, at: 0)
}
}
If we add one image as subview of animationView to check if animation has effect, then we can see that animation happens. But CAGradient layer does not have any effect.
Instead of gradient if we add backgroundColor, Animation happens as expected.
override func viewDidLoad() {
super.viewDidLoad()
//self.animationView.applyGradient(with: [UIColor(red: 0, green: 91/255, blue: 200/255, alpha: 1), UIColor(red: 0, green: 131/255, blue: 232/255, alpha: 1)])
self.animationView.backgroundColor = UIColor.blue
}
This means the newly added sublayer doesn't get resized on layoutIfNeeded(). Hence I have tried to force invoke layout or creating subclass and adding gradient as part of custom init.
self.animationView.layer.setNeedsLayout()
or
self.animationView.layoutIfNeeded()
or
class GradientView : UIView {
required init?(coder: NSCoder) {
super.init(coder:coder)
self.customInit()
}
override init(frame: CGRect) {
super.init(frame: frame)
self.customInit()
}
func animate(){
UIView.animate(withDuration: 0.25, delay: 2, options: .curveLinear, animations: {
self.frame.size.height = 80.0
self.layoutIfNeeded()
}, completion: nil)
}
func customInit(){
let containerView = UIView()
self.addSubview(containerView)
containerView.frame = self.bounds
self.autoresizingMask = [.flexibleHeight, .flexibleWidth]
let gradient = CAGradientLayer()
gradient.frame = self.bounds
gradient.name = "grad1"
gradient.colors = [UIColor(red: 0, green: 91/255, blue: 200/255, alpha: 1), UIColor(red: 0, green: 131/255, blue: 232/255, alpha: 1)].map { $0.cgColor }
gradient.startPoint = CGPoint(x: 0.0,y: 0.0)
gradient.endPoint = CGPoint(x: 0.0,y: 1.0)
containerView.layer.insertSublayer(gradient, at: 0)
}
}
But it didn't help.
How can I resolve the issue?
Thanks in advance.

Answer 1

This means the newly added sublayer doesn't get resized on
layoutIfNeeded()
Layers won't resize themselves when the parent View's bound/frame change, For example: if you apply shadow or border to view and then change the frame of the view border/shadow will not update themselves automatically. You have to resize the layer in layoutSubviews so change your code to
class GradientView : UIView {
private var gradient: CAGradientLayer?
override func layoutSubviews() {
super.layoutSubviews()
self.gradient?.frame = self.bounds
}
required init?(coder: NSCoder) {
super.init(coder:coder)
self.customInit()
}
override init(frame: CGRect) {
super.init(frame: frame)
self.customInit()
}
func animate(){
UIView.animate(withDuration: 0.25, delay: 2, options: .curveLinear, animations: {
self.frame.size.height = 80.0
self.layoutIfNeeded()
}, completion: nil)
}
func customInit(){
let containerView = UIView()
self.addSubview(containerView)
containerView.frame = self.bounds
self.autoresizingMask = [.flexibleHeight, .flexibleWidth]
self.gradient = CAGradientLayer()
gradient?.frame = self.bounds
gradient?.name = "grad1"
gradient?.colors = [UIColor(red: 0, green: 91/255, blue: 200/255, alpha: 1), UIColor(red: 0, green: 131/255, blue: 232/255, alpha: 1)].map { $0.cgColor }
gradient?.startPoint = CGPoint(x: 0.0,y: 0.0)
gradient?.endPoint = CGPoint(x: 0.0,y: 1.0)
if let gradient = self.gradient {
containerView.layer.insertSublayer(gradient, at: 0)
}
}
}
Hope this helps