Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CABasicAnimation not scaling around center

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()

enter image description here

like image 786
jignesh Vadadoriya Avatar asked Oct 14 '25 04:10

jignesh Vadadoriya


1 Answers

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 // ...
like image 183
matt Avatar answered Oct 16 '25 21:10

matt