I'm animating a CAGradientLayer
, similar to how Apple did with their "Slide to Unlock" animation on the home screen of iPhone. However my animation is a little different in that it slows down and speeds up at certain points.
The code I have so far is animates a gradient and works, but how would I get it to slow down/speed up at different points?
class AnimatedMaskLabel: UIView {
let gradientLayer: CAGradientLayer = {
let gradientLayer = CAGradientLayer()
// Configure the gradient here
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
let colors = [
UIColor.black.cgColor,
UIColor.white.cgColor,
UIColor.black.cgColor
]
gradientLayer.colors = colors
let locations: [NSNumber] = [0.0, 0.5, 1.0]
gradientLayer.locations = locations
return gradientLayer
}()
@IBInspectable var text: String! {
didSet {
setNeedsDisplay()
}
}
override func layoutSubviews() {
layer.borderColor = UIColor.green.cgColor
gradientLayer.frame = bounds
}
override func didMoveToWindow() {
super.didMoveToWindow()
layer.addSublayer(gradientLayer)
let gradientAnimation = CABasicAnimation(keyPath: "locations")
gradientAnimation.fromValue = [0.0, 0.0, 0.25]
gradientAnimation.toValue = [0.75, 1.0, 1.0]
gradientAnimation.duration = 3.0
gradientAnimation.repeatCount = Float.infinity
gradientLayer.add(gradientAnimation, forKey: nil)
}
}
Update 1:
To make it look exactly like I want, would I need to use CAMediaTimingFunction
at all?