How to animate CAGradientLayer color points? - swift

Question

I have a problem while animating the CAGradientLayer angle.
Angle in CAGradientLayer is represented through start and end point properties.
I want to animate the gradient in a circular fashion.
When I set it inside an animationGroup it doesn't work. No animation is happening.
When I am changing the properties in
DispatchQueue.main.asyncAfter(deadline: now() + 1.0) {
// change properties here
}
it works. But a very fast animation is happening. Which is not good enough.
On the internet the only thing there is is locations and color changes, but no angle change.
Below you can find a Playground project to play with
//: A UIKit based Playground for presenting user interface
import UIKit
import PlaygroundSupport
class MyViewController : UIViewController {
// Gradient layer specification
lazy var gradientLayer: CAGradientLayer = {
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.white.withAlphaComponent(0.5).cgColor, UIColor.orange.withAlphaComponent(0.5).cgColor, UIColor.orange.cgColor]
gradientLayer.locations = [0, 0.27, 1]
gradientLayer.frame = view.bounds
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
return gradientLayer
}()
func animationMapFunction(points: [(CGPoint, CGPoint)], keyPath: String) -> [CABasicAnimation] {
return points.enumerated().map { (arg) -> CABasicAnimation in
let (offset, element) = arg
let gradientStartPointAnimation = CABasicAnimation(keyPath: keyPath)
gradientStartPointAnimation.fromValue = element.0
gradientStartPointAnimation.toValue = element.1
gradientStartPointAnimation.beginTime = CACurrentMediaTime() + Double(offset)
return gradientStartPointAnimation
}
}
lazy var gradientAnimation: CAAnimation = {
let startPointAnimationPoints = [(CGPoint(x: 0.0, y: 0.0), CGPoint(x: 1.0, y:0.0)),
(CGPoint(x: 1.0, y:0.0), CGPoint(x: 1.0, y:1.0)),
(CGPoint(x: 1.0, y:1.0), CGPoint(x: 0.0, y:1.0)),
(CGPoint(x: 0.0, y:1.0), CGPoint(x: 0.0, y:0.0))]
let endPointAnimatiomPoints = [(CGPoint(x: 1.0, y:1.0), CGPoint(x: 0.0, y:1.0)),
(CGPoint(x: 0.0, y:1.0), CGPoint(x: 0.0, y:0.0)),
(CGPoint(x: 0.0, y: 0.0), CGPoint(x: 1.0, y:0.0)),
(CGPoint(x: 1.0, y:0.0), CGPoint(x: 1.0, y:1.0))]
let startPointAnimations = animationMapFunction(points: startPointAnimationPoints, keyPath: "startPoint")
let endPointAnimations = animationMapFunction(points: startPointAnimationPoints, keyPath: "endPoint")
let animationGroup = CAAnimationGroup()
animationGroup.duration = 5.0
animationGroup.repeatCount = Float.infinity
animationGroup.animations = startPointAnimations + endPointAnimations
return animationGroup
}()
override func loadView() {
let view = UIView(frame: UIScreen.main.bounds)
self.view = view
view.layer.addSublayer(gradientLayer)
}
func animate() {
view.layer.removeAllAnimations()
gradientLayer.add(gradientAnimation, forKey: nil)
}
}
// Present the view controller in the Live View window
let vc = MyViewController()
PlaygroundPage.current.liveView = vc
vc.animate()

Answer 1

So what I did was a timer, that triggers start and end points change.
I rotate from 0 to 360 degrees, while incrementing the angle with a given constant (in my case 6)
I created a function mapping: angle → (startPoint, endPoint)
func animate() {
stopAnimation()
timer = Timer.scheduledTimer(withTimeInterval: 0.05, repeats: true, block: { timer in
self.angle += 6.0
self.angle.formTruncatingRemainder(dividingBy: 360)
CATransaction.begin()
// disable implicit animation
CATransaction.setDisableActions(true)
let pos = points(from: self.angle)
self.gradientLayer.startPoint = pos.0
self.gradientLayer.endPoint = pos.1
CATransaction.commit()
})
}
func stopAnimation() {
timer?.invalidate()
}
And here are the utility functions
extension CGPoint {
var inverse: CGPoint {
return CGPoint(x: 1 - x, y: 1 - y)
}
}
fileprivate func points(from angle: Double) -> (CGPoint, CGPoint) {
let start: CGPoint
switch angle {
case let x where 0 <= x && x < 90:
start = CGPoint(x: x / 180, y: 0.5 - x / 180)
case let x where 90 <= x && x < 180:
start = CGPoint(x: x / 180, y: x / 180 - 0.5)
case let x where 180 <= x && x < 270:
start = CGPoint(x: 2.0 - x / 180, y: 0.5 + (x - 180) / 180)
case let x where 270 <= x && x < 360:
start = CGPoint(x: 2.0 - x / 180, y: 0.5 + (360 - x) / 180)
default:
start = CGPoint.zero
}
return (start, start.inverse)
}