0

I have this circle (that fits inside the letter O which is currently not exactly a circle) and I want it to shrink and regrow, fading out and in. So I have it shrinking, and fading out, but when it does the animation, the CAShapeLayer moves to the top left of the screen and doesn't stay put in place (which is the objective). How do I accomplish this?

    viewDidLoad {

        CAShapeLayer *circle1 = [CAShapeLayer layer];
        [circle1 setPath:[[UIBezierPath bezierPathWithOvalInRect:CGRectMake(74.93, 59.5, 31.52, 31.2)] CGPath]];
        [circle1 setStrokeColor:[[UIColor colorWithRed:0.8 green:0.1 blue:0.2 alpha:1.0] CGColor]];
        [circle1 setFillColor:[[UIColor colorWithRed:0.8 green:0.1 blue:0.2 alpha:1.0] CGColor]];      

        [[self.view layer] addSublayer:circle1];  

        CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];
        CABasicAnimation* shrinkAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        fadeAnim.fromValue = [NSNumber numberWithFloat:1.0];
        fadeAnim.toValue = [NSNumber numberWithFloat:0.0];
        fadeAnim.duration = 1.25;
        shrinkAnim.fromValue = [NSNumber numberWithFloat:1.0];
        shrinkAnim.toValue = [NSNumber numberWithFloat:0.05];
        shrinkAnim.duration = 1.25;
        [circle1 addAnimation:fadeAnim forKey:@"opacity"];
        [circle1 addAnimation:shrinkAnim forKey:@"transform.scale"];
        circle1.opacity = 0.0;
    }
Frank
  • 107
  • 9
  • you want to animation using fade in and fade out? – Jigar May 03 '16 at 03:14
  • Probably similar to [this question](http://stackoverflow.com/questions/11495956/calayer-cabasicanimation-not-scaling-around-center-anchorpoint/11496014#11496014). Try setting `circle1.frame = CGRectMake(74.93, 59.5, 31.52, 31.2)` and make the oval based on `CGRectMake(0, 0, 31.52, 31.2)`. – Kurt Revis May 03 '16 at 03:30
  • Wow it looks great, you're a genius (relative to where I'm at, you know?). Thanks very much. So, does the coordinate system for the oval path keep the drawing in place? Hence the (0, 0, ....)? – Frank May 03 '16 at 03:39
  • Think of it this way: the frame of the `CAShapeLayer` defines where the layer actually is (and where the `center` is, so also where the `transform` is applied to). The `path` is an overlay drawn on top of that layer. Since we offset the layer itself by `(74.93, 59.5)`, the path should start at `(0, 0)`. – Kurt Revis May 03 '16 at 04:52

0 Answers0