Fastest way to draw a full-screen linear gradient in iOS - ios

Question

I need to draw an animated linear gradient that is updated on every frame, using CADisplayLink. Drawing directly into a full-screen context with CoreGraphics is slow, I get around 40fps at full CPU load on an iPad Air.
What's the fastest way to do this?

Answer 1

Update
As #Kurt Revis pointed out in a comment on the question, the proper - and fastest - way to do this is to use CAGradientLayer. Add a CAGradientLayer to your view that fills its bounds, then:
func updateGradient() {
// Sample random gradient
let gradientLocs:[CGFloat] = [0.0, 0.5, 1.0]
let gradientColors:[CGColorRef] = [
UIColor.whiteColor().CGColor,
UIColor.init(colorLiteralRed: 0.0, green: 0.0, blue: 0.25*Float(arc4random())/Float(UINT32_MAX), alpha: 1.0).CGColor,
UIColor.blackColor().CGColor
]
// Disable implicit animations if this is called via CADisplayLink
CATransaction.begin()
CATransaction.setDisableActions(true)
// Draw to existing CAGradientLayer
gradientBackgroundLayer.colors = gradientColors
gradientBackgroundLayer.locations = gradientLocs
CATransaction.commit()
}
Old answer
After some experimentation, I ended up using CoreGraphics to draw the gradient into a 1px wide CGImage and then rely on UIImageView to do the scaling. I get solid 60fps at about 7-11% CPU load, depending on how many colors the gradient contains:
Subclass UIImageView with contentMode set to ScaleToFill, then call the following via CADisplayLink for a continuous animation.
func updateGradient() {
// Sample random gradient
let gradientLocs:[CGFloat] = [0.0, 0.5, 1.0]
let gradientColors:[CGColorRef] = [
UIColor.whiteColor().CGColor,
UIColor.init(colorLiteralRed: 0.0, green: 0.0, blue: 0.25*Float(arc4random())/Float(UINT32_MAX), alpha: 1.0).CGColor,
UIColor.blackColor().CGColor
]
// Create context at 1px width and display height
let gradientWidth:Double = 1
let gradientHeight:Double = Double(UIScreen.mainScreen().bounds.height)
UIGraphicsBeginImageContext(CGSize(width: gradientWidth, height: gradientHeight))
let buffer:CGContextRef = UIGraphicsGetCurrentContext()!
// Draw gradient into buffer
let colorspace = CGColorSpaceCreateDeviceRGB()
let gradient = CGGradientCreateWithColors(colorspace, gradientColors, gradientLocs)
CGContextDrawLinearGradient(
buffer,
gradient,
CGPoint(x: 0.0, y: 0.0),
CGPoint(x: 0.0, y: gradientHeight),
CGGradientDrawingOptions.DrawsAfterEndLocation
)
// Let UIImageView superclass handle scaling
image = UIImage.init(CGImage: CGBitmapContextCreateImage(buffer)!)
// Avoid memory leaks...
UIGraphicsEndImageContext()
}
Caveat: this approach will only work for horizontal or vertical linear gradients.
Are there better ways of doing this?