UIView Icon Animation - ios

Question

Im trying to do burst animation when the user clicks a view. Im bursting the view into circular pieces when the user clicks a specific view. So I have converted the uiview to uiimage as follows,
- (UIImage *) imageWithView:(UIView *)view
{
UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
}
Then I have broken the uiimage to pieces as follows,
-(void)splitImage:(UIImage *)image
{
CGFloat imgWidth = image.size.width/2;
CGFloat imgheight = image.size.height;
CGRect leftImgFrame = CGRectMake(0, 0, imgWidth, imgheight);
CGRect rightImgFrame = CGRectMake(imgWidth, 0, imgWidth, imgheight);
CGImageRef left = CGImageCreateWithImageInRect(image.CGImage, leftImgFrame);
CGImageRef right = CGImageCreateWithImageInRect(image.CGImage, rightImgFrame);
UIImage* leftImage = [UIImage imageWithCGImage:left];
UIImage* rightImage = [UIImage imageWithCGImage:right];
CGImageRelease(left);
CGImageRelease(right);
}
But there are certain issues im facing while doing it.
Im able to break the uiimage into only two pieces but not into
dynamic pieces.
How can i show like then uiview is bursting into circular pieces with these broken uiimages?
UPDATE:
Following is my updated code...
-(void)startAnimation{
//Add the initial circle
// UIView* circleView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 60, 60)];
UIView *circleView = [[UIImageView alloc] initWithFrame:self.submit.bounds];
circleView.bounds = self.submit.bounds;
CAShapeLayer *circleLayer = [CAShapeLayer layer];
//set colors
[circleLayer setStrokeColor:[[UIColor redColor] CGColor]];
[circleLayer setFillColor:[[UIColor clearColor] CGColor]];
[circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:circleView.bounds] CGPath]];
[circleView.layer addSublayer:circleLayer];
[self.view addSubview:circleView];
//Animate circle
[circleView setTransform:CGAffineTransformMakeScale(0, 0)];
[UIView animateWithDuration:0.7 animations:^{
[circleView setTransform:CGAffineTransformMakeScale(1.3, 1.3)];
} completion:^(BOOL finished) {
circleView.hidden = YES;
//start next animation
[self createIconAnimation];
}];
}
-(void)createIconAnimation{
//load icon which pops up
UIImageView* iconImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"ic_tick"]];
iconImage.frame = CGRectMake(50, 50, 60, 60);
iconImage.bounds = self.submit.bounds;
[iconImage setTransform:CGAffineTransformMakeScale(0, 0)];
[self.view addSubview:iconImage];
//animate icon
[UIView animateWithDuration:0.3/1.5 animations:^{
iconImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
iconImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
iconImage.transform = CGAffineTransformIdentity;
}];
}];
}];
//add circles around the icon
int numberOfCircles = 20;
CGPoint center = iconImage.center;
float radius= 35;
BOOL isBig = YES;;
for (int i = 0; i<numberOfCircles; i++) {
float x = radius*cos(M_PI/numberOfCircles*i*2) + center.x;
float y = radius*sin(M_PI/numberOfCircles*i*2) + center.y;
float circleRadius = 10;
if (isBig) {
circleRadius = 5;
isBig = NO;
}else{
isBig = YES;
}
UIView* circleView = [[UIView alloc] initWithFrame:CGRectMake(x, y, circleRadius, circleRadius)];
CAShapeLayer *circleLayer = [CAShapeLayer layer];
[circleLayer setStrokeColor:[[UIColor redColor] CGColor]];
[circleLayer setFillColor:[[UIColor redColor] CGColor]];
[circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:circleView.bounds] CGPath]];
[circleView.layer addSublayer:circleLayer];
[self.view addSubview:circleView];
//animate circles
[UIView animateWithDuration:0.8 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
[circleView setTransform:CGAffineTransformMakeTranslation(radius/3*cos(M_PI/numberOfCircles*i*2), radius/3*sin(M_PI/numberOfCircles*i*2))];
[circleView setTransform:CGAffineTransformScale(circleView.transform, 0.01, 0.01)];
} completion:^(BOOL finished) {
circleView.hidden = YES;
}];
}
}
The animation has to be on top of the self.submit button but it is not positioned on top of it

Answer 1

Here you go, just add this code to your view controller. It gives you this result:
Just play around with the colors and the animations to get your desired result.
#import "ViewController.h"
#interface ViewController ()
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self startAnimation];
}
-(void)startAnimation{
//Add the initial circle
UIView* circleView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 60, 60)];
CAShapeLayer *circleLayer = [CAShapeLayer layer];
//set colors
[circleLayer setStrokeColor:[[UIColor redColor] CGColor]];
[circleLayer setFillColor:[[UIColor clearColor] CGColor]];
[circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:circleView.bounds] CGPath]];
[circleView.layer addSublayer:circleLayer];
[self.view addSubview:circleView];
//Animate circle
[circleView setTransform:CGAffineTransformMakeScale(0, 0)];
[UIView animateWithDuration:0.7 animations:^{
[circleView setTransform:CGAffineTransformMakeScale(1.3, 1.3)];
} completion:^(BOOL finished) {
circleView.hidden = YES;
//start next animation
[self createIconAnimation];
}];
}
-(void)createIconAnimation{
//load icon which pops up
UIImageView* iconImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Untitled"]];
iconImage.frame = CGRectMake(50, 50, 60, 60);
[iconImage setTransform:CGAffineTransformMakeScale(0, 0)];
[self.view addSubview:iconImage];
//animate icon
[UIView animateWithDuration:0.3/1.5 animations:^{
iconImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
iconImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
iconImage.transform = CGAffineTransformIdentity;
}];
}];
}];
//add circles around the icon
int numberOfCircles = 20;
CGPoint center = iconImage.center;
float radius= 35;
BOOL isBig = YES;;
for (int i = 0; i<numberOfCircles; i++) {
float x = radius*cos(M_PI/numberOfCircles*i*2) + center.x;
float y = radius*sin(M_PI/numberOfCircles*i*2) + center.y;
float circleRadius = 10;
if (isBig) {
circleRadius = 5;
isBig = NO;
}else{
isBig = YES;
}
UIView* circleView = [[UIView alloc] initWithFrame:CGRectMake(x, y, circleRadius, circleRadius)];
CAShapeLayer *circleLayer = [CAShapeLayer layer];
[circleLayer setStrokeColor:[[UIColor redColor] CGColor]];
[circleLayer setFillColor:[[UIColor redColor] CGColor]];
[circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:circleView.bounds] CGPath]];
[circleView.layer addSublayer:circleLayer];
[self.view addSubview:circleView];
//animate circles
[UIView animateWithDuration:0.8 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
[circleView setTransform:CGAffineTransformMakeTranslation(radius/3*cos(M_PI/numberOfCircles*i*2), radius/3*sin(M_PI/numberOfCircles*i*2))];
[circleView setTransform:CGAffineTransformScale(circleView.transform, 0.01, 0.01)];
} completion:^(BOOL finished) {
circleView.hidden = YES;
}];
}
}
#end