CODEWITHSUNDEEP
iosswiftanimationuilabel
D. Finna
D. Finna

Reputation: 467

Update uilabel percentage with animation of progress circle swift

I have a circle that is animating itself. It is given a number between 0.01 and 1.0 and it animates after that in a circle.

I have a label in the middle of it called progressLabel. I would like the label to count along as the circle animates. So if the value is at 0.12, the label should display 12%.

Here is the code for my circle animating:

func animateView(toValue: Double, strokeColor: UIColor) {

        let screenWidth = self.view.frame.size.width
        let screenHeight = self.view.frame.size.height

        let circle = UIView(frame: CGRectMake((screenWidth / 2) - (150 / 2), (screenHeight / 2) - (150 / 2), 150, 150)) // viewProgress is a UIView
        circle.backgroundColor = UIColor.clearColor()
        view.addSubview(circle)

        var progressCircle = CAShapeLayer()
        var backgroundCircle = CAShapeLayer()
        progressCircle.frame = view.bounds
        backgroundCircle.frame = view.bounds

        let lineWidth:CGFloat = 20
        let rectFofOval = CGRectMake(lineWidth / 2, lineWidth / 2, circle.bounds.width - lineWidth, circle.bounds.height - lineWidth)

        let circlePath = UIBezierPath(ovalInRect: rectFofOval)

        progressCircle = CAShapeLayer ()
        progressCircle.path = circlePath.CGPath
        progressCircle.strokeColor = UIColor.whiteColor().CGColor
        progressCircle.fillColor = UIColor.clearColor().CGColor
        progressCircle.lineWidth = 20.0
        progressCircle.frame = view.bounds
        progressCircle.lineCap = "round"

        backgroundCircle = CAShapeLayer ()
        backgroundCircle.path = circlePath.CGPath
        backgroundCircle.strokeColor = strokeColor.CGColor
        backgroundCircle.fillColor = UIColor.clearColor().CGColor
        backgroundCircle.lineWidth = 20.0
        backgroundCircle.frame = view.bounds
        backgroundCircle.lineCap = "round"

        circle.layer.addSublayer(backgroundCircle)
        circle.layer.addSublayer(progressCircle)
        circle.transform = CGAffineTransformRotate(circle.transform, CGFloat(-M_PI_2))

        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.toValue = toValue
        animation.duration = 1
        animation.fillMode = kCAFillModeForwards
        animation.removedOnCompletion = false
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)

        progressCircle.addAnimation(animation, forKey: nil)
    }

I have tried this but the label just keeps displaying 0.0%..

var current: Double = 0.0

                let i = current * 100
                let max = 0.1 * 100


                if i < max {


                    self.progressLabel.text = "\(current)%"
                    current += 0.01 * 100
                }

Upvotes: 1

Views: 1145

Answers (1)

Naveen Ramanathan
Naveen Ramanathan

Reputation: 2206

You should check the values of the presentation layer to get the current value of the animated property.

func printValue() {
        let currentLayer = progressCircle.presentation()
        current = currentLayer?.value(forKeyPath: "strokeEnd") as? Float;
        print("current \(current)")

        let i = current! * 100
        let max:Float = 100


        if i < max {
            self.progressLabel.text = "\(current! * 100)%"
        }

    }

Call the method printValue from where ever you want to display the current value

Upvotes: 2

Related Questions