Add shimmer animation flowing from one view to another - ios

Question

I am trying to create shimmer animation flowing from one view to another view. Below is the code that I have so far:
override func viewDidLoad() {
super.viewDidLoad()
view1.backgroundColor = .purple
view2.backgroundColor = .purple
view1.startAnimating()
//let seconds = 2.0
//DispatchQueue.main.asyncAfter(deadline: .now() + seconds) {
self.view2.startAnimating()
//}
}
class ShimmerView: UIView {
let gradientColorOne : CGColor = UIColor.purple.cgColor
let gradientColorTwo : CGColor = UIColor.yellow.cgColor
func addGradientLayer() -> CAGradientLayer {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.bounds
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.colors = [gradientColorOne, gradientColorTwo, gradientColorOne]
gradientLayer.locations = [0.0, 0.5, 1.0]
self.layer.addSublayer(gradientLayer)
return gradientLayer
}
func addAnimation() -> CABasicAnimation {
let animation = CABasicAnimation(keyPath: "locations")
animation.fromValue = [-1.0, -0.5, 0.0]
animation.toValue = [1.0, 1.5, 2.0]
animation.repeatCount = .infinity
animation.duration = 2
return animation
}
func startAnimating() {
let gradientLayer = addGradientLayer()
let animation = addAnimation()
gradientLayer.add(animation, forKey: animation.keyPath)
}
}
I tried to add delay but I guess that's not going to work because next time the animation should start with further delay.
This is how it behaves right now. Animation happens in parallel:
But, what I want is that it to start the animation from view1 and then finishes in view2 and it keep on doing that. Any ideas/ suggestions on how to achieve this? Thank you.

Answer 1

You can try controlling the animation sequencing from call site like following.
Define a constant called animationDuration inside the ShimmerView like this.
public static let animationDuration: Double = 2.0
Update the addAnimation() implementation like this.
// Remove this line, We need this to be performed only once at a time.
/*
animation.repeatCount = .infinity
*/
// Update this line to use the constant defined earlier
animation.duration = ShimmerView.animationDuration
From your call site, you can now do this.
class ViewController: UIViewController {
let view1 = ShimmerView()
let view2 = ShimmerView()
func startAnimating() {
view1.startAnimating()
let interval = ShimmerView.animationDuration
DispatchQueue.main.asyncAfter(deadline: .now() + interval) { [weak self] in
self?.view2.startAnimating()
DispatchQueue.main.asyncAfter(deadline: .now() + interval) { [weak self] in
self?.startAnimating()
}
}
}
}
UPDATE
This kind of almost works, but when view1 finishes the animation and view2 starts it, the gradient on view1 sits in the middle and vice versa. So, it doesn't give a clear flowing animation from top to bottom that goes on.
The problem is your code is not removing the gradientLayer instance from your view upon animation completion. You can do it with CATransaction.setCompletionBlock like following.
import Foundation
import UIKit
class ShimmerView: UIView {
static let animationDuration: Double = 2.0
let gradientColorOne: CGColor = UIColor.purple.cgColor
let gradientColorTwo: CGColor = UIColor.yellow.cgColor
lazy var gradientLayer: CAGradientLayer = {
let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
gradient.colors = [gradientColorOne, gradientColorTwo, gradientColorOne]
gradient.locations = [0.0, 0.5, 1.0]
return gradient
}()
func addGradientLayer() {
gradientLayer.frame = self.bounds
self.layer.addSublayer(gradientLayer)
}
func removeGradientLayer() {
gradientLayer.removeFromSuperlayer()
}
func addAnimation() -> CABasicAnimation {
let animation = CABasicAnimation(keyPath: "locations")
animation.fromValue = [-1.0, -0.5, 0.0]
animation.toValue = [1.0, 1.5, 2.0]
animation.duration = ShimmerView.animationDuration
return animation
}
func startAnimating() {
self.addGradientLayer()
let animation = addAnimation()
CATransaction.begin()
// Setting this block before adding the animation is crucial
CATransaction.setCompletionBlock({ [weak self] in
self?.removeGradientLayer()
})
gradientLayer.add(animation, forKey: animation.keyPath)
CATransaction.commit()
}
}