swiftanimationbackgroundswift3viewdidappear

Animation in viewDidAppear not working after going background in Swift 3


I'm currently developing a countdown app in Swift 3. Behind the counter, I created a circle, which is animated according to the counter.

My problem is simple: when I click home and I put the app in the background, the animation doesn't work any more when I come back to the app. I don't know why. Interesting fact: the "drawing" is a plain circle, and only the border is animated. The circle's background is still ok, it is only the border animation which is not working any more.

Here is my code :

 override func viewDidAppear(_ animated: Bool) {
      super.viewDidAppear(animated)
      let screen = self.view.frame.size.width
      let y = CGFloat(190)
      let circleWidth = CGFloat(200)
      let circleHeight = circleWidth

      // Create a new CircleView
      let circleView = CircleView(frame: CGRect(x: (screen/2) - (circleWidth/2), y: y, width: circleWidth, height: circleHeight))

      view.addSubview(circleView)

         // Animate the drawing of the circle over the course of 1 second
         circleView.animateCircle(TimeInterval(seconds))
   }

CircleView class:

import Foundation
import UIKit

class CircleView: UIView{
   var circleLayer: CAShapeLayer!

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

      // 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: CGFloat(-M_PI/2), endAngle: CGFloat(M_PI*1.5), clockwise: true)

      // Setup the CAShapeLayer with the path, colors, and line width
      circleLayer = CAShapeLayer()
      circleLayer.path = circlePath.cgPath
      circleLayer.fillColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.2).cgColor
      circleLayer.strokeColor = UIColor(red: 165/255, green: 219/255, blue: 255/255, alpha: 0.8).cgColor
      circleLayer.lineWidth = 2.0;

      // 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: TimeInterval) {
      // 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 = 1
      animation.toValue = 0

      // 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 = 0.0

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

}

Solution

  • All you need to do is add one more line in your animation code which is:

    animation.isRemovedOnCompletion = false
    

    and your code will be:

    func animateCircle(_ duration: TimeInterval) {
        // 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 = 1
        animation.toValue = 0
    
        // Do a linear animation (i.e. the speed of the animation stays the same)
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    
        animation.isRemovedOnCompletion = false
    
        // Set the circleLayer's strokeEnd property to 1.0 now so that it's the
        // right value when the animation ends.
        circleLayer.strokeEnd = 0.0
    
        // Do the actual animation
        circleLayer.add(animation, forKey: "animateCircle")
    }