1

Alright, Im pretty new to CAShapeLayer but I need to know how to fill in a CAShapeLayer circle with a color starting from the outside outline and going to the center like this - enter image description here

I am drawing my circle with this modified from a tutorial:

var circleLayer: CAShapeLayer!

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.clearColor()

        // Use UIBezierPath as an easy way to create the CGPath for the layer.
        // The path should be the entire circle.
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0), radius: (frame.size.width - 10)/2, startAngle: 0.0, endAngle: CGFloat(M_PI * 2.0), clockwise: true)

        // Setup the CAShapeLayer with the path, colors, and line width
        circleLayer = CAShapeLayer()
        circleLayer.path = circlePath.CGPath
        circleLayer.fillColor = UIColor.clearColor().CGColor
        circleLayer.strokeColor = UIColor.whiteColor().CGColor
        circleLayer.lineWidth = 1.5;

        // Don't draw the circle initially
        circleLayer.strokeEnd = 0.0

        // Add the circleLayer to the view's layer's sublayers
        layer.addSublayer(circleLayer)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func animateCircle(duration: NSTimeInterval) {
        // We want to animate the strokeEnd property of the circleLayer
        let animation = CABasicAnimation(keyPath: "strokeEnd")

        // Set the animation duration appropriately
        animation.duration = duration

        // Animate from 0 (no circle) to 1 (full circle)
        animation.fromValue = 0
        animation.toValue = 1

        // Do a linear animation (i.e. the speed of the animation stays the same)
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)

        // Set the circleLayer's strokeEnd property to 1.0 now so that it's the
        // right value when the animation ends.
        circleLayer.strokeEnd = 1.0

        // Do the actual animation
        circleLayer.addAnimation(animation, forKey: "animateCircle")
    }

}

Then I add the CircleView like this -

 func addCircleView() {
        let diceRoll = CGFloat(Int(arc4random_uniform(7))*50)
        var circleWidth = screenSize.width*(85/330)
        var circleHeight = circleWidth

        // Create a new CircleView
        circleView = CircleView(frame: CGRectMake(diceRoll, 0, circleWidth, circleHeight))
        circleView.center = CGPointMake(screenSize.width*0.5, screenSize.height*0.71)

        view.addSubview(circleView)
blue
  • 7,175
  • 16
  • 81
  • 179
  • Is there a reason why this couldn't just be a white (or background coloured) circle on top of a pink circle? – Westside Jul 21 '16 at 14:40
  • Because I have an icon inside my circle that I need to cover over. I need to fill from outside – blue Jul 21 '16 at 14:44
  • In that case I think what you want is an animated mask that covers the image (a circle with a circular hole in it), rather than drawing the circle over the top. The code in this answer: http://stackoverflow.com/questions/15375777/cut-out-shape-with-animation should be tweakable to get the effect that you're after. – Westside Jul 21 '16 at 15:03

0 Answers0