CODEWITHSUNDEEP
iphoneiosanimationquartz-core
Priyank Gandhi
Priyank Gandhi

Reputation: 1253

Gradient effect in QuartzCore

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.

enter image description here

Upvotes: 1

Views: 527

Answers (3)

Elliott
Elliott

Reputation: 4628

Dot Image

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;
}

Upvotes: 3

BhushanVU
BhushanVU

Reputation: 3455

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
}

Upvotes: 1

DivineDesert
DivineDesert

Reputation: 6954

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

Upvotes: 0

Related Questions