CODEWITHSUNDEEP
iosanimation
Vaisakh Vinod
Vaisakh Vinod

Reputation: 277

Circular animation

I want to implement an animation, its like from a point view starts expanding circularly and filling the entire view. I have implemented the following code but it does not fill the view circularly. Any ideas?

- (void)viewDidLoad {
[super viewDidLoad];
myView =[[UIView alloc]init];
myView.frame=CGRectMake(self.view.frame.size.width/2,self.view.frame.size.height/2+100, .1, .1);
myView.backgroundColor=[UIColor redColor];
[self.view addSubview:myView];
[self animate];
}

-(void)animate{
[UIView animateWithDuration:1.0
                      delay: 0.0
                    options:UIViewAnimationOptionCurveEaseOut
                 animations:^{
                     [self setRoundedView: myView toDiameter:1000];

                 }
                 completion:nil];
}


-(void)setRoundedView:(UIView *)roundedView toDiameter:(float)newSize;
{
CGPoint saveCenter = roundedView.center;
    CGRect newFrame = CGRectMake(roundedView.frame.origin.x,      roundedView.frame.origin.y, newSize, newSize);
roundedView.frame = newFrame;
roundedView.layer.cornerRadius = newSize / 2.0;
roundedView.center = saveCenter;
}

Upvotes: 1

Views: 225

Answers (2)

stefos
stefos

Reputation: 1235

You can create a CAShape layer with circular Bezier Path and animate the path property.

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

Check here for more details : Animating CAShapeLayer size change

If you dont want to use CAnimation you can just scale your rounded view like this :

[UIView animateWithDuration:1.0
                  delay: 0.0
                options:UIViewAnimationOptionCurveEaseOut
             animations:^{
                 myView.transform = CGAffineTransformMakeScale(scaleX,scaleY);

             }
             completion:nil];

Upvotes: 1

Hardik Shekhat
Hardik Shekhat

Reputation: 1878

Try this code. May be helpful.

    // Set up the shape of the circle
    int radius = 100;
    CAShapeLayer *circle = [CAShapeLayer layer];
    // Make a circular shape
    circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius)
                                             cornerRadius:radius].CGPath;
    // Center the shape in self.view
    circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius,
                                  CGRectGetMidY(self.view.frame)-radius);

    // Configure the apperence of the circle
    circle.fillColor = [UIColor redColor].CGColor;
    circle.strokeColor = [UIColor blackColor].CGColor;
    circle.lineWidth = 5;

    // Add to parent layer
    [self.view.layer addSublayer:circle];

    // Configure animation
    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = 10.0; // "animate over 10 seconds or so.."
    drawAnimation.repeatCount         = 1.0;  // Animate only once..

    // Animate from no part of the stroke being drawn to the entire stroke being drawn
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];

    // Experiment with timing to get the appearence to look the way you want
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    // Add the animation to the circle
    [circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

Upvotes: 0

Related Questions