下の画像のようなUIを作りたいです。今度はQuartzCoreで作りたいです。
円、垂直線、水平線を含むすべてのグラフィックを実装しました。
その中心点を画像に表示されているアニメーション効果で作成する方法を少し混乱させています。
質問する
522 次
3 に答える
3
上に示した画像を描くために使用されるアプローチの鍵は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;
}
于 2013-03-23T10:55:54.070 に答える
1
これはアップルからのもので、Quarrtzでシャドウを追加する方法を示しています。ここで説明します
シャドウの場合、私たちの場合はシアン色とほぼ等しい正しい色の値を使用できます。
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
}
于 2013-03-22T07:23:56.833 に答える
0
放射状のグラデーションをいくつかの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で完成できる他のレイアウト
于 2013-03-22T07:22:24.447 に答える