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