Group Animation in ios

Question

I'm making a custom loader which has circular shaped layer inside and It will animate in two way. First shape will animate pulsing like scaling it's radius increase and decrease with infinite time and in same time it will rotate inside the view with around the center of view. But now my group animation does't work properly, view didn't rotate full radius and scaling didn't worked here's my code review and tell me where I'm doing mistake.

class ViewController: UIViewController {
    @IBOutlet weak var loaderView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //circularLoader()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
    }
    
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        drawCircularLoader()
    }
    
    func drawCircularLoader(){
        let width = loaderView.bounds.width
        
        let halfWidth = width / 2
        let size = CGSize(width: halfWidth / 2, height: halfWidth / 2)
        
        let rect = CGRect(x: halfWidth - (size.width / 2), y: (halfWidth / 2) - (size.height / 2), width: size.width, height: size.height)
        
        let path = UIBezierPath(ovalIn: rect)
        let layer = CAShapeLayer()
        
        layer.frame = rect
        layer.fillColor = UIColor.black.cgColor
        
        
        layer.path = path.cgPath
        
        loaderView.layer.addSublayer(layer)
        
        let rotation = CABasicAnimation(keyPath: "transform.rotation")
        rotation.fromValue = 0
        rotation.toValue = 2.0 * .pi
        rotation.duration = 1.5
        layer.add(rotation, forKey: nil)
        
        let scaling = CABasicAnimation(keyPath: "transform.scale")
        scaling.toValue = 1.2
        scaling.duration = 0.3
        scaling.autoreverses = true
        
        let group = CAAnimationGroup()
        group.animations = [rotation, scaling]
        group.repeatCount = .infinity
        layer.add(group, forKey: nil)
        
    }

}

matt · Answer 1 · 2021-05-23T20:45:13.957

The immediate problem is that the animation group has no duration. It needs a duration long enough for all its child animations to complete. Otherwise everything just stops after .2 seconds (the default). Try giving the group a duration of 1.5.

In a broader sense I doubt whether your overall goal is a good use of an animation group at all. But that's a different matter. Plus you have two transform animations; they might be interfering with each other (transform is one animatable property), so a different approach might be needed.

Group Animation in ios

1 Answers1