Gradient addition in UITableviewCell causing animation issue on reloading - ios

Question

I want to make chat screen, and the chat bubbles have some gradient. While applying gradient to UIView its creating problem in reloading.
GradientView has been setup as the class of UIView which is placed on UITableViewCell
class GradientView: UIView {
let gradientLayer = CAGradientLayer()
func setup() {
layer.addSublayer(gradientLayer)
}
func configure() {
gradientLayer.frame = self.bounds
gradientLayer.colors = [RGBA(r: 167, g: 1, b: 88, a: 1.0).cgColor, RGBA(r: 243, g: 135, b: 32, a: 1.0).cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
override func layoutSubviews() {
super.layoutSubviews()
setup()
configure()
}
}
The problem is while reloading the table view the gradient shows up with animation.

Answer 1

Many properties you set on CALayer and its subclasses will be animated by default. For a gradient layer, this includes the bounds, the gradient colours, and the start and end points, all of which you are setting here.
This is called implicit animation.
You can turn it off by creating a transaction, disabling actions, performing your changes, then committing the transaction:
CATransaction.begin()
CATransaction.setDisableActions(true)
// Do your stuff
CATransaction.commit()
However, that can get a bit messy. An alternative is to create a non-animating layer subclass and use that instead of CAGradientLayer:
class NonAnimatingGradientLayer: CAGradientLayer {
override func action(forKey event: String) -> CAAction? {
return NSNull()
}
}
Use this instead of CAGradientLayer and nothing will be animated.

Answer 2

layoutSubviews is called many times
class GradientView: UIView {
var gradientLayer:CAGradientLayer!
func setup() {
gradientLayer = CAGradientLayer()
layer.addSublayer(gradientLayer)
gradientLayer.frame = self.bounds
gradientLayer.colors = [RGBA(r: 167, g: 1, b: 88, a: 1.0).cgColor, RGBA(r: 243, g: 135, b: 32, a: 1.0).cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0)
}
override func layoutSubviews() {
super.layoutSubviews()
if gradientLayer == nil {
setup()
}
}
}