QuartzCore 中的渐变效果

Question

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

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

我对如何使该中心点与图像中显示的动画效果有点混淆。

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

这个来自苹果，展示了如何在 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 完成的其他布局