QuartzCore中的渐变效果

Question

我想制作如下图所示的UI。现在我想通过QuartzCore来实现它。

我已经实现了所有图形，包括圆形，垂直和水平线。

我很少混淆如何使用Image中显示的动画效果制作中心点。

Answer 1

用于绘制上图所示方法的关键是使用CGContextDrawRadialGradient绘制点。然后我们可以使用此点图像作为CALayer的内容，允许我们重新定位它并按照我们认为合适的方式设置动画。

在原来的问题中你问过......

  

如何使用图像中显示的动画效果来制作中心点？

...但作为静止图像，它不会显示任何动画。我已经做了一个有根据的猜测，你是如何想象这个点是动画的。

以下代码创建一个带有脉动动画的渐变点，反复淡入淡出：

代码

#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

这是来自apple，展示了如何在Quartz中添加阴影。 Here解释

对于阴影，你可以使用几乎等于青色的正确颜色值，

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

您可以向某些CALayer绘制径向渐变，然后只为该CALayer设置动画 使用CGContextDrawRadialGradient绘制渐变图层

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

希望这有帮助，我没有测试过这个，但可能会给你一些指示。 您可以使用CGContext完成的其他布局