title: Animating a CAShapeLayer / CAGradientLayer
body: <p>This is an addition to a question that I asked yesterday. The result worked perfect, but I would like a modification. <a href="https://stackoverflow.com/questions/39454427/using-drawrect-to-draw-animate-two-graphs-a-background-graph-and-a-foregroun/">Using drawRect to draw &amp; animate two graphs. A background graph, and a foreground graph</a></p>
  
  <p>The following code, based on the thread above, produces a CABasicAnimation that grows the dark blue "triangle." Instead of a dark blue solid color, I would like this to be a CAGradientLayer with 3 stops: Red / Green / Blue.</p>
  
  <p>I tried adding a CAGradientLayer to configure the gradient, then used addSubLayer to add the gradient to the CAShapeLayer that animates out. The result that I am posting below does not animate. The color and shape just remain static. The gradient looks great, just need for it to animate out:</p>
  
  <p><a href="https://i.stack.imgur.com/NZhpy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NZhpy.png" alt="enter image description here"></a></p>
  
  <pre><code>import UIKit
  import QuartzCore
  import XCPlayground
  
  let view = UIView(frame: CGRect(x: 0, y: 0, width: 521, height: 40))
  view.backgroundColor = UIColor.whiteColor()
  XCPlaygroundPage.currentPage.liveView = view
  
  let maskPath = UIBezierPath()
  
  maskPath.moveToPoint(CGPoint(x: 0, y: 30))
  maskPath.addLineToPoint(CGPoint(x: 0, y: 25))
  maskPath.addLineToPoint(CGPoint(x: 300, y: 10))
  maskPath.addLineToPoint(CGPoint(x: 300, y: 30))
  maskPath.closePath()
  
  let maskLayer = CAShapeLayer()
  maskLayer.path = maskPath.CGPath
  maskLayer.fillColor = UIColor.whiteColor().CGColor
  
  let rectToAnimateFrom = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 0, height: 40))
  let rectToAnimateTo = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 97, height: 40))
  
  let backgroundGray = CAShapeLayer()
  backgroundGray.path = maskPath.CGPath
  backgroundGray.fillColor = UIColor.grayColor().CGColor
  
  let foregroundGradient = CAShapeLayer()
  foregroundGradient.mask = maskLayer
  foregroundGradient.backgroundColor = UIColor.clearColor().CGColor
  
  
  let gradientLayer = CAGradientLayer()
  gradientLayer.startPoint = CGPointMake(0, 0)
  gradientLayer.endPoint = CGPointMake(1, 0)
  gradientLayer.frame = maskPath.bounds
  
  let colors = [UIColor.redColor().CGColor, UIColor.greenColor().CGColor, UIColor.blueColor().CGColor]
  gradientLayer.colors = colors
  
  
  foregroundGradient.addSublayer(gradientLayer)
  
  
  view.layer.addSublayer(backgroundGray)
  view.layer.addSublayer(foregroundGradient)
  
  
  let animation = CABasicAnimation(keyPath: "path")
  animation.fromValue = rectToAnimateFrom.CGPath
  animation.toValue = rectToAnimateTo.CGPath
  animation.duration = 2
  animation.removedOnCompletion = false
  animation.fillMode = kCAFillModeForwards
  
  
  foregroundGradient.addAnimation(animation, forKey: nil)
  </code></pre>
  
  <p><strong>I need the foregroundGradient object (with the gradientLayer sublayer!) to animate from left to right.</strong></p>
  
  <p>If you remove the gradient from my code above, and keep foregroundGradient as a solid color, you'll see the animating.</p>