How to Generate a Shockwave Effect

Question

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.

_{(source: mzstatic.com)}

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

...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

I would prefer intersecting shockwaves to be more like this:

enter image description here

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

score 0 · Answer 1 · answered Jun 23 '14 at 18:32

0

Use [UIColor clearColor] to make the center of your circle transparent (so you can see interface elements residing beneath it).

center.backgroundColor = [UIColor clearColor];

answered Jun 23 '14 at 18:32

esqew

42,425
27
92
132

I tried it and found that making the center clear eradicates it completely because it is on top of the wave. So what's happening now is an expanding circle of blue. – nanothread Jun 23 '14 at 18:45
@nanothread59 Ah, I see how you have it set up now. You can use [this solution on SO](http://stackoverflow.com/questions/3800278/iphone-draw-transparent-rectangle-on-uiview-to-reveal-view-beneath) to create the intersection and make a "hole" through the two views, if you so choose. – esqew Jun 23 '14 at 18:48

score 0 · Answer 2 · answered Jun 23 '14 at 18:33

0

It's a quick fix! You already did most of it. Just change this line:

center.backgroundColor = self.view.backgroundColor;

to

center.backgroundColor = [UIColor clearColor];

answered Jun 23 '14 at 18:33

Dylan Gattey

1,713
13
34

How to Generate a Shockwave Effect

2 Answers2