我想制作如下图所示的 UI。现在我想用 QuartzCore 来制作它。
我已经实现了所有的图形,包括圆圈、垂直和水平线。
我对如何使该中心点与 Image 中显示的动画效果有点混淆。
我想制作如下图所示的 UI。现在我想用 QuartzCore 来制作它。
我已经实现了所有的图形,包括圆圈、垂直和水平线。
我对如何使该中心点与 Image 中显示的动画效果有点混淆。
用于绘制上面显示的图像的方法的关键是使用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;
}
这个来自苹果,展示了如何在 Quartz 中添加阴影。这里解释
对于阴影,在您的情况下,您可以使用几乎等于青色的正确颜色值,
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
}
您可以将径向渐变绘制到一些 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 完成的其他布局