I would like to generate a shockwave effect when I tap on a circular UIView. The effect I'm looking for is very similar to 'Circadia' on the App Store.

[![](https://i.stack.imgur.com/syj7C.jpg)](https://i.stack.imgur.com/syj7C.jpg)  

(source: [mzstatic.com](http://a5.mzstatic.com/eu/r30/Purple2/v4/5d/46/48/5d46481e-04a3-d139-352f-416cbbba058d/screen568x568.jpeg)) 

Note the circular line that is expanding from the centre view. I couldn't find any kind of tutorial, so I tried the effect using a cheat:

```
-(void)startShockwave:(UIView *)target
{

// Replace the view tapped with one that will expand
UIView *wave = [[UIView alloc]initWithFrame:target.frame];
wave.backgroundColor = target.backgroundColor;
wave.alpha = 0.5;
wave.layer.masksToBounds = YES;
wave.layer.cornerRadius = wave.frame.size.width / 2;

// Hide it below the original view
[self.view insertSubview:wave belowSubview:target];

CGRect frame = wave.frame;

// Create a view that is the same colour as self.view to make it look like a hole
UIView *center = [[UIView alloc]initWithFrame:CGRectMake(frame.origin.x + 10, frame.origin.y + 10, frame.size.width - 20, frame.size.height - 20)];
center.backgroundColor = self.view.backgroundColor;
center.layer.masksToBounds = YES;
center.layer.cornerRadius = center.frame.size.width / 2;
[self.view insertSubview:center aboveSubview:wave];

// Hide the original view
target.alpha = 0;

// IMPORTANT: I send these views behind the others so that center does not overlap them
[self.view sendSubviewToBack:center];
[self.view sendSubviewToBack:wave];

[UIView animateWithDuration:0.4 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
    CGAffineTransform waveTransform = wave.transform;
    CGAffineTransform centerTransform = center.transform;

    // Expand the views to look like a shockwave
    wave.transform = CGAffineTransformScale(waveTransform, 4, 4);
    center.transform = CGAffineTransformScale(centerTransform, 5.75, 5.75);

    // Fade the wave out to nothing
    wave.alpha = 0;
} completion:^(BOOL finished) {
    // Remove the shockwave
    [wave removeFromSuperview];
    [center removeFromSuperview];
}];
}

```

This works quite well...

![enter image description here](https://i.stack.imgur.com/va7x0.png)

...With only one shockwave. However, when they intersect, one center overlaps the other due to the most recent shockwave being sent to the back.

![enter image description here](https://i.stack.imgur.com/CJrUR.png)

I would prefer intersecting shockwaves to be more like this:

![enter image description here](https://i.stack.imgur.com/fx39u.jpg)

I'm not sure how to create this type of effect, however, so any help is much appreciated!