Gradient effect in QuartzCore - iphone

Question

I want make UI like the below image. Now I want to make it by QuartzCore.
I had implemented all the Graphics including circles,Vertical and horizontal lines.
I am little confuse how to make that center point with animation effect shown in Image.

Answer 1

The key to the approach used to draw the image shown above is using CGContextDrawRadialGradient to draw the dot. We can then use this dot image as the contents of a CALayer, allowing us to reposition it and animate it as we see fit.
In your original question you asked...
how to make that center point with animation effect shown in Image?
...but as a still image it doesn't show any animation. I've made an educated guess as to how you envisioned the dot be animated.
The following code creates a gradated dot with a pulsating animation, fading in and out repeatedly:
Code
#import <QuartzCore/QuartzCore.h>
...
- (void)viewDidLoad
{
[super viewDidLoad];
CGFloat dotDiameter = 30.f;
CGFloat dotRadius = dotDiameter * 0.5;
CGRect dotRect = CGRectMake(CGRectGetMidX(self.view.frame) - dotRadius,
CGRectGetMidY(self.view.frame) - dotRadius,
dotDiameter, dotDiameter);
CALayer *dotLayer = [CALayer layer];
dotLayer.contents = (id)[self dotImageOfDiameter:dotDiameter].CGImage;
dotLayer.cornerRadius = dotRadius;
dotLayer.frame = dotRect;
dotLayer.masksToBounds = YES;
// Animate the dot to make it appear to pulsate.
CABasicAnimation *pulseAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
pulseAnimation.autoreverses = YES;
pulseAnimation.duration = 0.8;
pulseAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pulseAnimation.repeatCount = INFINITY;
pulseAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[dotLayer addAnimation:pulseAnimation forKey:#"opacity"];
[self.view.layer addSublayer:dotLayer];
}
- (UIImage *)dotImageOfDiameter:(CGFloat)diameter
{
UIGraphicsBeginImageContextWithOptions(CGSizeMake(diameter, diameter), NO, 0.0f);
CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat radius = diameter * 0.5;
CGColorSpaceRef baseColorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat colours[8] = { 0.56f, 0.78f, 0.94f, 1.0f, // Opaque dot colour.
0.56f, 0.78f, 0.94f, 0.0f }; // Transparent dot colour.
CGGradientRef gradient = CGGradientCreateWithColorComponents (baseColorSpace, colours, NULL, 2);
CGContextDrawRadialGradient(context, gradient, CGPointMake(radius, radius), 0.0f, CGPointMake(radius, radius), radius, kCGGradientDrawsAfterEndLocation);
CGImageRef dotImageRef = CGBitmapContextCreateImage(context);
UIImage *dotImage = [UIImage imageWithCGImage:dotImageRef];
CGColorSpaceRelease(baseColorSpace);
CGGradientRelease(gradient);
CGImageRelease(dotImageRef);
UIGraphicsEndImageContext();
return dotImage;
}

Answer 2

This one is from apple, shows how to add shadows in Quarrtz. Here it is explained
For shadow you can use the right color values nearly equal to cyan color in ur case,
void MyDrawWithShadows (CGContextRef myContext, // 1
CGFloat wd, CGFloat ht);
{
CGSize myShadowOffset = CGSizeMake (-15, 20);// 2
CGFloat myColorValues[] = {1, 0, 0, .6};// 3
CGColorRef myColor;// 4
CGColorSpaceRef myColorSpace;// 5
CGContextSaveGState(myContext);// 6
CGContextSetShadow (myContext, myShadowOffset, 5); // 7
// Your drawing code here// 8
CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);
CGContextFillRect (myContext, CGRectMake (wd/3 + 75, ht/2 , wd/4, ht/4));
myColorSpace = CGColorSpaceCreateDeviceRGB ();// 9
myColor = CGColorCreate (myColorSpace, myColorValues);// 10
CGContextSetShadowWithColor (myContext, myShadowOffset, 5, myColor);// 11
// Your drawing code here// 12
CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);
CGContextFillRect (myContext, CGRectMake (wd/3-75,ht/2-100,wd/4,ht/4));
CGColorRelease (myColor);// 13
CGColorSpaceRelease (myColorSpace); // 14
CGContextRestoreGState(myContext);// 15
}

Answer 3

You can draw radial gradient to some CALayer and then just animate that CALayer
Use CGContextDrawRadialGradient to draw gradient layer
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:#"transform"];
[anim setFromValue:[NSValue valueWithCATransform3D:CATransform3DIdentity]];
// Scale x and y up
[anim setToValue:[NSValue valueWithCATransform3D:
CATransform3DMakeScale (1.0f, 1.0f,0.0f)]];
[anim setAutoreverses:YES];
[anim setRepeatCount:HUGE_VALF];
[gradientViewlayer addAnimation:anim];
Hope this helps, I havent tested this, but may be this can give you some directions.
Other layout you can complete with CGContext