Scale a circle at same center position

Question

I am working on scaling the circle and keep the same center position, which looks like the pulsing circle on map.

AnimationView.m

@property (nonatomic, strong) UIBezierPath *ovalPath;

- (void)drawCircle
{
    UIGraphicsBeginImageContext(self.frame.size);
    CGRect rect = CGRectMake(25.45, 49.25, 5.8, 5.8);
    self.ovalPath = [UIBezierPath bezierPathWithOvalInRect: rect];
    [self.ovalPath fill];
    UIGraphicsEndImageContext();
}

- (void)bumpUpCircle
{
    CAShapeLayer *pathLayer = [CAShapeLayer layer];

    pathLayer.frame     = self.bounds;
    pathLayer.path      = self.ovalPath.CGPath;
    pathLayer.fillColor = [UIColor blackColor].CGColor;
    pathLayer.lineWidth = 2.0f;
    pathLayer.lineJoin  = kCALineJoinBevel;
    [self.layer addSublayer:pathLayer];

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.0, 0.0, 0)];
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(10.0, 10.0, 10.0)];
    animation.repeatCount = 1;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.duration = 1;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [pathLayer addAnimation:animation forKey:@"transform.scale"];
    NSLog(@"%@",NSStringFromCGPoint(self.bounds.origin));
}

However, the scaling position is in a strange position, rather than the center of the circle.

Any ideas will be very appreciated. Thanks.

Edit:

GIF uploaded

score 2 · Accepted Answer · answered Jul 18 '15 at 03:05

My suggestion for you with a pulsing circle, is to use an UIView and add it as a subview in your UIViewController. In following example you get a pulsing circle (a UIView with a cornerRadius like the radius) scaling up and down in a very few lines. Include this e.g. in your UIViewController's viewDidLoad to try it out.

int radius = 100;
UIView * circleView = [[UIView alloc] init];
circleView.backgroundColor = [UIColor greenColor];
circleView.frame = CGRectMake(0, 0, radius*2, radius*2);
circleView.center = self.view.center;
circleView.layer.cornerRadius = radius;
[self.view addSubview:circleView];

[UIView animateWithDuration:0.8f
                      delay:0.0f
                    options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat
                 animations:^{
                     circleView.transform = CGAffineTransformMakeScale(1.1, 1.1);
                 } completion:^(BOOL fin) { 
                     // Do nothing
                 }];

Scale a circle at same center position

1 Answers1