Animating a CAShapeLayer / CAGradientLayer

Question

This is an addition to a question that I asked yesterday. The result worked perfect, but I would like a modification. Using drawRect to draw & animate two graphs. A background graph, and a foreground graph

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.

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:

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)

I need the foregroundGradient object (with the gradientLayer sublayer!) to animate from left to right.

If you remove the gradient from my code above, and keep foregroundGradient as a solid color, you'll see the animating.

@Dhanesh - it's mentioned in the 3rd paragraph. The gradient LOOKS perfect. exact size and color(s) that I need it. However the animation does not work. Have a look at the thread I posted. The blue animates from left to right, while the gray triangle is the background. I need that same result here, except using my gradient. — Joe, Sep 13 '16 at 04:51

score 3 · Accepted Answer · answered Sep 13 '16 at 06:12

I think you have to use your mask in your view as mention below.

//Remove below line
view.layer.addSublayer(backgroundGray)

//Add your mask to view
view.layer.mask = backgroundGray

the whole function looks like this:

func getGradientView() {
    let view = UIView(frame: CGRect(x: 0, y: 50, width: 521, height: 40))
    view.backgroundColor = UIColor.grayColor()
    self.view.addSubview(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: 300, 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)

    //Remove below line
    //view.layer.addSublayer(backgroundGray)

    view.layer.addSublayer(foregroundGradient)

    //Add you mask to view
    view.layer.mask = backgroundGray

    let animation = CABasicAnimation(keyPath: "path")
    animation.fromValue = rectToAnimateFrom.CGPath
    animation.toValue = rectToAnimateTo.CGPath
    animation.duration = 1
    animation.repeatCount = 1000
    animation.removedOnCompletion = false
    animation.fillMode = kCAFillModeForwards


    maskLayer.addAnimation(animation, forKey: "fill animation")
}

Let me know if its working as per your exceptions.

Animating a CAShapeLayer / CAGradientLayer

1 Answers1