Animation For image in sequence

Question

I've a screen where following kind of animation has to too be implemented.

The circles unfurl out of the bloom and then spread out to become the individual buttons. Slightly slower the first time it animates (1 sec), slight faster for the second time (.75s), and then faster for all subsequent times (.5s).

But I could not figure out what kind of animation has to be implemented. Any help would be appreciated.

Answer 1

What you describe is a complicated animation. What you should probably do is just break it down into its constituent parts:

1. Create circular buttons, eg:

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.backgroundColor = [UIColor ...]; button.frame = CGRectMake(...); // probably define this to be square, just off screen to the bottom button.layer.cornerRadius = button.frame.size.height / 2.0; button.layer.borderColor = [UIColor ...].CGColor; // white or black as appropriate button.layer.borderWidth = 2.0; [self.view insertSubview:button atIndex:0]; [buttons addObject:button]; 

2. Animate their appearance on the screen by animating each of the buttons from off screen to the appropriate vertical position using animateWithDuration . You could move them all together, or you might stagger them so they appear to fall into place, using a rendition that includes delay so you can delay each button a little more. Perhaps something like:

    for (NSInteger idx = 0; idx < count; idx++) { [UIView animateWithDuration:duration * (count - idx) / count delay:duration * idx / count options:0 animations:^{ UIButton *button = buttons[idx]; button.center = CGPointMake(button.center.x, idx * 50.0 + 100.0); } completion:^(BOOL finished) { //do next step }]; } 

3. Unfurl the buttons by animating the frame of the button to be the full width that that row will eventually occupy. Again, you can just use animateWithDuration .

4. Animate the unrounding of the corners so they're square, like your final buttons. This is the one animation that you cannot easily do with animateWithDuration , but rather you might use CAKeyFrameAnimation :

    [buttons enumerateObjectsUsingBlock:^(UIView *button, NSUInteger idx, BOOL *stop) { CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"cornerRadius"]; animation.values = @[@(button.layer.cornerRadius), @(0.0)]; animation.duration = duration; animation.fillMode = kCAFillModeForwards; animation.removedOnCompletion = NO; if (idx == 0) animation.delegate = self; [button.layer addAnimation:animation forKey:nil]; }]; 

   Your delegate's animationDidStop can initiate the next step of the animation.

5. Replace the wide button with one that is broken up into the right number of individual buttons for that row. You might want to make these be lined up edge to edge.

6. Do a final frame adjustment of the buttons so they end up with a little space in between them. Again, you can use animateWithDuration .

7. Replace the previously blank labels on the buttons with the final text strings. Note, the label on a button is not generally an animatable property, so if you'd like it to fade in nicely, you should use transitionWithView , specifying the common superview for all of those buttons and use an options value of UIViewAnimationOptionTransitionCrossDissolve .

If you look at each one of these steps, you can see that none is terribly complicated. Just break your complicated animation into separate steps, write one method for each animation, and have each trigger the next step of the animation.

Answer 2

UIButtons don't have a rounded rectangle look to them any more in iOS 7. Are you going to create a custom subclass of UIButton?

If so, I would suggest using CAAnimation. You should be able to attach a CALayer to each button and set it's borderColor, backgroundColor, borderWidth, and cornerRadius. When you want to animate the layer, just change the bounds of the layer and it will animate to the larger size.

To change the animation's duration or timing you could enclose your changes in a CATransaction. Something like this:

[CATransaction begin];
[CATransaction setAnimationDuration: 1.0];
CAMediaTimingFunction *linearTiming = 
  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionLinear];
[CATransaction setAnimationTimingFunction: linearTiming]
myButton1Layer.bounds = newButton1ounds;
myButton2Layer.bounds = newButton2ounds;
[CATransaction commit];