Expanding a circle from centre of the Screen

Question

I am trying to expand a circle from Zero radius to a predefined radius at the centre of the screen. The code is as follows

In viewDidLoad:-

- (void)viewDidLoad {

    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [super viewDidLoad];

    circleRadius = 0.0f;

    circle = [CAShapeLayer layer];

    [circle setAnchorPoint:CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2)];
    [circle setFillColor:[UIColor redColor].CGColor];
    [circle setStrokeColor:[UIColor colorWithWhite:0.9f alpha:0.7f].CGColor];
    [circle setLineWidth:0.0f];

    [self.view.layer addSublayer:circle];


    [self drawCircleWithRadius:circleRadius];


}

- (void)animateImageView {
    circleRadius += 70.0f;
    [self drawCircleWithRadius:circleRadius];
}

- (void)drawCircleWithRadius:(CGFloat)radius {

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    [pathAnimation setFromValue:(id)circle.path];//(id)circle.path
    [pathAnimation setToValue:(id)[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0f * radius, 2.0f * radius) cornerRadius:radius].CGPath];
    [pathAnimation setDuration:0.5f];
    [pathAnimation setRepeatCount:1.0f];
    [pathAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
    circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath;
    circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius, CGRectGetMidY(self.view.frame)-radius);
    [circle addAnimation:pathAnimation forKey:@"changePathAnimation"];
}

-animateImageView runs on the tap of a bar button. Somehow the animation is not as smooth and the circle is not seeming to grow form the centre of screen.

Please point out the mistake in the code. Thanks.

You need to define the problem a bit more accurately than `not as smooth and is not seeming to`. Also, what have you tried to solve the problem? — Wain, Apr 27 '15 at 10:39
The circle is wobbling around while resizing from zero radius to full radius and then settling around at the centre of the screen. Please do state any further confusions in the problem statement. — Shikhar varshney, Apr 27 '15 at 10:54
Why not create the final size path and then animate a simple scale transform - so the centre position never changes. Also, should you really be setting the anchor point? — Wain, Apr 27 '15 at 11:53
I am not aware of the scale and transform function. Can you please show me with some sample code on how to achieve this. Thanks. — Shikhar varshney, Apr 27 '15 at 11:58
Take a look at http://stackoverflow.com/questions/9837384/calayer-scale-animation-for-layer-size-starting-from-bottom-left-to-top-right — Wain, Apr 27 '15 at 12:02

score 2 · Accepted Answer · answered Apr 27 '15 at 13:15

try the following code, this worked for me. I think the issue was with setting the correct path. So please how I calculated the path in the below code.

- (void)viewDidLoad
{
  [super viewDidLoad];

  circleRadius = 200.0f;
  CGPoint ptCenter = self.view.center;

  circle = [CAShapeLayer layer];
  circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(ptCenter.x - circleRadius, ptCenter.y - circleRadius, 2.0f * circleRadius, 2.0f * circleRadius) cornerRadius:circleRadius].CGPath;

  [circle setFillColor:[UIColor redColor].CGColor];
  [circle setStrokeColor:[UIColor colorWithWhite:0.9f alpha:0.7f].CGColor];
  [circle setLineWidth:0.0f];

  [self.view.layer addSublayer:circle];
  //[self drawCircleWithRadius:circleRadius];
}

- (IBAction)onTap:(id)sender
{
  [self animateImageView];
}

- (void)animateImageView
{
   circleRadius += 70.0f;
   [self drawCircleWithRadius:circleRadius];
}

- (void)drawCircleWithRadius:(CGFloat)radius 
{

  CGPoint ptCenter = self.view.center;
  CGRect rectBezierPath = CGRectMake(ptCenter.x - radius, ptCenter.y - radius, 2.0f * radius, 2.0f * radius);

  CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];

  [pathAnimation setFromValue:(id)circle.path];
  [pathAnimation setToValue:(id)[UIBezierPath bezierPathWithRoundedRect:rectBezierPath cornerRadius:circleRadius].CGPath];

  [pathAnimation setDuration:0.5f];
  [pathAnimation setRepeatCount:1.0f];

  [pathAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];

  circle.path = [UIBezierPath bezierPathWithRoundedRect:rectBezierPath cornerRadius:circleRadius].CGPath;
  [circle addAnimation:pathAnimation forKey:@"changePathAnimation"];
}

Expanding a circle from centre of the Screen

1 Answers1