Circular view and color and cifilter with animation

Question

I'm working on an app, and i need to make an effects when the user click on a UIButton.

http://imageshack.com/a/img802/3337/on55.png

When the user click on the button on center in the screenshot, there is an halo with colors on a picture that be loading with web request. The picture was load with color, and actually i apply on it a cifilter that remove colors.

If it's possible, just explain to me how i can reproduce the circular view with background image.

Thanks.

Answer 1

So, i'm trying to explain my solution, i'm french and i've a poor english :D

To make this possible, i make a uiview with a custom drawrect, PaintCode really help me to do this, because my designer make some svg exemple file and i load it in PaintCode to make the UIBezierPath. Like this.

UIBezierPath* bezier2Path = [UIBezierPath bezierPath];
    [bezier2Path moveToPoint: CGPointMake(160, 228.1)];
    [bezier2Path addCurveToPoint: CGPointMake(148.16, 239.5) controlPoint1: CGPointMake(153.46, 228.1) controlPoint2: CGPointMake(148.16, 233.2)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 250.9) controlPoint1: CGPointMake(148.16, 245.8) controlPoint2: CGPointMake(153.46, 250.9)];
    [bezier2Path addCurveToPoint: CGPointMake(171.84, 239.5) controlPoint1: CGPointMake(166.54, 250.9) controlPoint2: CGPointMake(171.84, 245.8)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 228.1) controlPoint1: CGPointMake(171.84, 233.2) controlPoint2: CGPointMake(166.54, 228.1)];
    [bezier2Path closePath];
    [bezier2Path moveToPoint: CGPointMake(160, 249.51)];
    [bezier2Path addCurveToPoint: CGPointMake(149.62, 239.5) controlPoint1: CGPointMake(154.26, 249.51) controlPoint2: CGPointMake(149.62, 245.03)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 229.49) controlPoint1: CGPointMake(149.62, 233.97) controlPoint2: CGPointMake(154.26, 229.49)];
    [bezier2Path addCurveToPoint: CGPointMake(170.38, 239.5) controlPoint1: CGPointMake(165.74, 229.49) controlPoint2: CGPointMake(170.38, 233.97)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 249.51) controlPoint1: CGPointMake(170.38, 245.03) controlPoint2: CGPointMake(165.74, 249.51)];
    [bezier2Path closePath];
    bezier2Path.miterLimit = 4;

When the uiview is init, i init her when my image is download from internet with AFNetworking. And i set the image in backgroug of my view in drawrect like this :

//// General Declarations
CGContextRef context = UIGraphicsGetCurrentContext();


//// Image Declarations
UIImage* bGTest = [UIImage imageNamed:self.image];

//// Calque_2_-_copie
{
    //// Bezier 2 Drawing
    UIBezierPath* bezier2Path = [UIBezierPath bezierPath];
    [bezier2Path moveToPoint: CGPointMake(160, 228.1)];
    [bezier2Path addCurveToPoint: CGPointMake(148.16, 239.5) controlPoint1: CGPointMake(153.46, 228.1) controlPoint2: CGPointMake(148.16, 233.2)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 250.9) controlPoint1: CGPointMake(148.16, 245.8) controlPoint2: CGPointMake(153.46, 250.9)];
    [bezier2Path addCurveToPoint: CGPointMake(171.84, 239.5) controlPoint1: CGPointMake(166.54, 250.9) controlPoint2: CGPointMake(171.84, 245.8)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 228.1) controlPoint1: CGPointMake(171.84, 233.2) controlPoint2: CGPointMake(166.54, 228.1)];
    [bezier2Path closePath];
    [bezier2Path moveToPoint: CGPointMake(160, 249.51)];
    [bezier2Path addCurveToPoint: CGPointMake(149.62, 239.5) controlPoint1: CGPointMake(154.26, 249.51) controlPoint2: CGPointMake(149.62, 245.03)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 229.49) controlPoint1: CGPointMake(149.62, 233.97) controlPoint2: CGPointMake(154.26, 229.49)];
    [bezier2Path addCurveToPoint: CGPointMake(170.38, 239.5) controlPoint1: CGPointMake(165.74, 229.49) controlPoint2: CGPointMake(170.38, 233.97)];
    [bezier2Path addCurveToPoint: CGPointMake(160, 249.51) controlPoint1: CGPointMake(170.38, 245.03) controlPoint2: CGPointMake(165.74, 249.51)];
    [bezier2Path closePath];
    bezier2Path.miterLimit = 4;

    CGContextSaveGState(context);
    [bezier2Path addClip];
    [bGTest drawInRect: CGRectMake(0, 0, bGTest.size.width, bGTest.size.height)];
    CGContextRestoreGState(context);
}

It's really simple, and after i can animate my view only with alpha component to make my ripple animation.

See screenshot now :

http://imageshack.com/a/img839/4613/v2wm.png

Thanks for your reply.

Answer 2

I'm not sure that you're asking about progress circle, but you can use image masking to get any shape of view you want. This is example of progress circle:

Create custom view and override drawRect method like this

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetAllowsAntialiasing(context, true);
    CGContextClipToMask(context, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), [UIImage imageNamed:@"circle"]);
    CGContextBeginPath(context);

    UIColor* colour = [UIColor greenColor];
    CGFloat red, green, blue, alpha;
    [colour getRed:&red green:&green blue:&blue alpha:&alpha];
    CGContextSetRGBFillColor(context,red,green,blue,alpha);

    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 1.5f);
    CGContextMoveToPoint(context, self.frame.size.width / 2,self.frame.size.height / 2);
    CGContextAddArc(context, self.frame.size.width / 2,self.frame.size.height / 2, self.frame.size.width, M_PI_2 , M_PI_2 - 2 * M_PI * (1 - self.progress) , 0);
    CGContextClosePath(context);
    CGContextFillPath(context);
}

self.progress is value from 0 to 1.

Last part of code is used to draw green arc with a big radius inside your view:

circle image is a ring that will be user to mask arc (black with transparent background):

After you combine this two (draw and mask), you get something like this (you can mask your image with filled circle):

Changing circle you can change line width. Don't forget to set transparent background to your custom view.

Regards