IOS: Best way to animate objects and unleash others?

I am starting with this:

When the user taps any of those faces, it has to animate to the center of the screen, followed by the apparition of some buttons around it, sort of like this

The problem is I don't have any idea how am I supposed to do this, so I am asking you for some advice and how do you recommend I should do it.

---

An example implementation can be found at: https://github.com/WDUK/ButtonAnimationStackOverflow (Most, if not all of the processing is done in WDViewController.m, so concentrate your efforts there)

As a brief overview, this is what went into the development of the example:

• There was no need for CoreAnimation, we were able to achieve the animations required simply via the UIKit animation wrappers and manipulation of the center and alpha properties.

• The animation was done in 2 stages, first to get the selected button to the centre, then to spread out the available options. The animations to reverse this are also included.

• The blurred background was achieved by using a Category Apple provided as sample code for WWDC 2013, and doing a simple fade in/out with two image views. This works quite nicely.

Key calculations:

• To animate the image to the centre, set .center of the image to the same as self.view.center within an animation block

• To calculate the positioning of the options surrounding the image, use the formula

  newX = oldX + distance * cos(angleInRadians);
  newX = oldY + distance * sin(angleInRadians);
  
  

• The angle of the option (in degrees) can be calculated as

  indexOfOption * (360.0 / numberOfOptions)
  
  

• To convert degrees to radians

  (angleInDegrees / 180.0) * M_PI
  
  

• To animate the image back to its original position, either store the original position and use that (could be messy with 15 options on screen), or calculate the original position (like in my example). To do this, you need to do

  image.origin.x = edgePadding + (imageSize * (i%imageCountPerRow) + (i%imageCountPerRow) * edgePadding);
  image.origin.y = topPadding + edgePadding + (imageSize * (i/imageCountPerRow) + (i/imageCountPerRow) * edgePadding);
  
  

I'd say they're the key calculations you need to keep in mind, the alpha values of the various images and views are straight forward.

As mentioned in the GitHub, I provide no guarantees to the quality and accuracy of the code if used in production. I did just whip it up in 40mins, and there may be typos and minor bugs. But it does compile and run, and demonstrates the effect I think you were after.

If you want to expand on this code, please go ahead. There could be a lot of things you can do to improve this (slight velocity bounce when the options are displayed for example!), although some of these improvements may need the code to be rewritten with Core Animation in mind.