Animate a line using CALayer in NSView

Question

I have a custom subclass of NSView in which I draw a horizontal line. My NSView has a property called lineLength that defines the length of the line.

I would like to trigger an animation that makes the line grow. I use any mouse click on the view as trigger (not mandatory, just a simple way to start the animation).

Well, it doesn't work. My line doesn't even draw since I added the CA Layer and I don not understand what's happening. Clearly, I missed something.

What should I do to animate my line ?

class myView: NSView
{
   var lineLength: CGFloat = 10.0

    override func awakeFromNib()
    {
        super.awakeFromNib()

        self.layer = CALayer()
        self.wantsLayer = true
        self.layer?.display()
    }

     override func drawRect(dirtyRect: NSRect)
    {
        super.drawRect(dirtyRect)

        // Drawing code here.
        let path = NSBezierPath()
        path.moveToPoint(NSMakePoint(0.0, 10.0)
        path.lineToPoint(NSMakePoint(lineLength, 10.0)
        NSColor.blackColor().set()
        path.stroke()
    }

    override func mouseDown(theEvent: NSEvent)
    {
        let animation:CABasicAnimation = CABasicAnimation()

        animation.keyPath = "lineLength";
        animation.fromValue = 10;
        animation.toValue = 500;
        animation.duration = 3;

        self.layer!.addAnimation(animation, forKey: "basic");
    }
}

One idea, would be to subclass the CALayer and use it to draw. But I don't think I'm supposed to do that. Usually, apple as simpler solutions.

Answer 1

You can make the line a variable of your myView - a CAShapeLayer. Add it as a sublayer of your view's layer.

var yourLineLayer = CAShapeLayer()
// then in your awake..
layer.addSublayer(yourLineLayer)

Your drawing code for the line will be a little different too. You can create the path as you're doing, but then use that path to set up the shape layer.

yourLineLayer.path = path.CGPath()
yourLineLayer.strokeColor = UIColor.blackColor()
yourLineLayer.fillColor = UIColor.clearColor()

You can add animations to that CAShapeLayer. Also your animation doesn't really do anything. Here's what it would look like to animate the line.

override func mouseDown(theEvent: NSEvent)
{
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.toValue = 1
    animation.duration = 3
    yourLineLayer.addAnimation(animation, forKey: "strokeEnd")
}