CABasicAnimation无法围绕中心缩放

Question

I want to perform opacity And Scale effect at same time my animation work perfect but it's position is not proper. i want to perform animation on center. This is my code.

    btn.backgroundColor = UIColor.yellowColor()
    let stroke =  UIColor(red:236.0/255, green:0.0/255, blue:140.0/255, alpha:0.8)
    let pathFrame = CGRectMake(24, 13, btn.bounds.size.height/2, btn.bounds.size.height/2)

    let circleShape1 = CAShapeLayer()
    circleShape1.path = UIBezierPath(roundedRect: pathFrame, cornerRadius: btn.bounds.size.height/2).CGPath
    circleShape1.position = CGPoint(x: 2, y: 2)
    circleShape1.fillColor = stroke.CGColor
    circleShape1.opacity = 0

    btn.layer.addSublayer(circleShape1)

    circleShape1.anchorPoint = CGPoint(x: 0.5, y: 0.5)

    let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
    scaleAnimation.fromValue = NSValue(CATransform3D: CATransform3DIdentity)
    scaleAnimation.toValue = NSValue(CATransform3D: CATransform3DMakeScale(2.0, 2.0, 1))

    let alphaAnimation = CABasicAnimation(keyPath: "opacity")
    alphaAnimation.fromValue = 1
    alphaAnimation.toValue = 0

    CATransaction.begin()
    let animation = CAAnimationGroup()
    animation.animations = [scaleAnimation, alphaAnimation]
    animation.duration = 1.5
    animation.repeatCount = .infinity
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    circleShape1.addAnimation(animation, forKey:"Ripple")
    CATransaction.commit()

Answer 1

The problem is that you are not grappling with frames correctly. You say:

 let circleShape1 = CAShapeLayer()

But you have forgotten to give circleShape1 a frame! Thus, its size is zero, and very weird things happen when you animate it. Your job in the very next line should be to assign circleShape1 a frame. Example:

circleShape1.frame = pathFrame

That may or may not be the correct frame; it probably isn't. But you need to figure that out.

Then, you need to fix the frame of your Bezier path in terms of the shape layer's bounds :

circleShape1.path = UIBezierPath(roundedRect: circleShape1.bounds // ...

Answer 2

You need to create path frame with {0,0} position, and set correct frame to the Layer:

let pathFrame = CGRectMake(0, 0, btn.bounds.size.height/2, btn.bounds.size.height/2)
....
circleShape1.frame = CGRect(x: 0, y: 0, width: pathFrame.width, height: pathFrame.height)
circleShape1.position = CGPoint(x: 2, y: 2)

If you want to create path with {13,24} position you need to change width and height in layer. Your shape should be in center of layer.

Answer 3

I have never worked with sublayers so I would make it with a subview instead, makes the code a lot easier:

btn.backgroundColor = UIColor.yellow

let circleShape1 = UIView()

circleShape1.frame.size = CGSize(width: btn.frame.height / 2, height: btn.frame.height / 2)
circleShape1.center = CGPoint(x: btn.frame.width / 2, y: btn.frame.height / 2)
circleShape1.layer.cornerRadius = btn.frame.height / 4
circleShape1.backgroundColor = UIColor(red:236.0/255, green:0.0/255, blue:140.0/255, alpha:0.8)
circleShape1.alpha = 1

btn.addSubview(circleShape1)

UIView.animate(withDuration: 1,
               delay: 0,
               options: [.repeat, .curveLinear],
               animations: {
                    circleShape1.transform = CGAffineTransform(scaleX: 5, y: 5)
                    circleShape1.alpha = 0.4
               }, completion: nil)