“Glitch” during UIView Intro CAAnimation

Question

I'm trying to add an Animation to a UIView. The objective of the animation is to "animate" the View appearing on screen (instead of just appearing there).

The animation is all size scaling: start from 5%, go up to 120% and then very quickly back to 100% of the regular scale.

My issue is that the full scale UIView appears very quickly, before the animation starts.

Here's the code:

UIView * myView = [[UIView alloc] initWithFrame:someFrame];
[self.view addSubview:myView];
[self initialAnimationFor:myView];

-(void) initialAnimationFor:(UIView*)pView {

    const CFTimeInterval firstDuration = 0.75f;
    const CFTimeInterval secondDuration = 0.025f;
    const float initialValue = 0.05f;
    const float middleValue = 1.20f;

    CABasicAnimation * firstAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    firstAnimation.duration = firstDuration;
    firstAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    firstAnimation.fromValue = [NSNumber numberWithFloat:initialValue];
    firstAnimation.toValue = [NSNumber numberWithFloat:middleValue];

    CABasicAnimation * secondAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    secondAnimation.duration = secondDuration;
    secondAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    secondAnimation.fromValue = [NSNumber numberWithFloat:middleValue];
    secondAnimation.toValue = [NSNumber numberWithFloat:1.0f];

    CAAnimationGroup *animationGroup = [CAAnimationGroup new];
    animationGroup.duration = firstDuration + secondDuration;
    animationGroup.animations = @[firstAnimation, secondAnimation];

    [pView.layer addAnimation:animationGroup forKey:nil];
}

Any ideas? Thanks!

Answer 1

I would do a different technique and use chained UIView block animations, like this:

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    UIView *myView          = [[UIView alloc] initWithFrame:CGRectMake(40, 40, 200, 200)];
    myView.backgroundColor  = [UIColor redColor];
    [self initialAnimationFor:myView];
}
- (void)initialAnimationFor:(UIView*)pView {
    pView.transform = CGAffineTransformMakeScale(0.05f, 0.05f);
    if (pView.superview == nil) {
        [self.view addSubview:pView];
    }
    [UIView
     animateWithDuration:0.75f
     animations:^{
         pView.transform = CGAffineTransformMakeScale(1.20f, 1.20f);
     }
     completion:^(BOOL finished) {
         [UIView
          animateWithDuration:0.25f // <-- Your old value of 0.025f makes the animation VERY quick
          animations:^{
              pView.transform = CGAffineTransformIdentity;
          }
          ];
     }
     ];
}

With this setup, you get the "grow to slightly larger than 100% and then 'settle' to 100%" effect.

Is this a workable solution?