iOS: Best way to animate items and blur out others? [closed]

Question

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.

Answer 1

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.

Answer 2

You'll need a couple calculations but it might not be that difficult to implement.

---

Steps

Here is the algorithm part:

1. Move the selectedPictureView to the center of the screen.
2. Remove it from it's superview.
3. Add a new view (we'll call it backgroundView) with a clear background on top of all your pictures.
4. Insert the selectedPictureView in backgroundView.
5. Generate a blurredBackground of the current view by creating a screenshot of it and blurring it using UIImage+ImageEffects.h.
6. Add blurredBackground as the background image of backgroundView
7. Place every controls you wanna display hidden behind selectedPictureView using yourControl.center = selectedPictureView.center
8. Animate them around selectedPictureView

---

Animations

And for each step, here is the algorithm animation part:

1. Animate to the center of the screen [UIView animateWithDuration:.3 animations:^{ selectedPictureView.center = self.view.center; }];
2. No animation
3. No animation
4. No animation
5. No animation

6. Once you've added it, do a nice fadeIn animation blurredBackground.opacity = 0; [UIView animateWithDuration:.3 animations:^{ blurredBackground.opacity = 1; }];

7. No animation

8. Animate them to their new positions

[UIView animateWithDuration:.3 animations:^{ yourControl.frame = newFrame; }];

---

You could eventually look at https://www.cocoacontrols.com/controls/alradial. It replicates the Path application behavior, I believe that it would help you create those animations.

Hope that helps!

Edit: You can use @WDUK answer to calculate your controls positions. https://stackoverflow.com/a/21589989/1835155