从屏幕中心扩大一个圆圈答案

【问题标题】：Expanding a circle from centre of the Screen从屏幕中心扩大一个圆圈
【发布时间】：2015-04-27 10:36:33
【问题描述】：

我正在尝试将圆从零半径扩展到屏幕中心的预定义半径。代码如下

在 viewDidLoad 中：-

- (void)viewDidLoad {

    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [super viewDidLoad];

    circleRadius = 0.0f;

    circle = [CAShapeLayer layer];

    [circle setAnchorPoint:CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2)];
    [circle setFillColor:[UIColor redColor].CGColor];
    [circle setStrokeColor:[UIColor colorWithWhite:0.9f alpha:0.7f].CGColor];
    [circle setLineWidth:0.0f];

    [self.view.layer addSublayer:circle];


    [self drawCircleWithRadius:circleRadius];


}

- (void)animateImageView {
    circleRadius += 70.0f;
    [self drawCircleWithRadius:circleRadius];
}

- (void)drawCircleWithRadius:(CGFloat)radius {

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    [pathAnimation setFromValue:(id)circle.path];//(id)circle.path
    [pathAnimation setToValue:(id)[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0f * radius, 2.0f * radius) cornerRadius:radius].CGPath];
    [pathAnimation setDuration:0.5f];
    [pathAnimation setRepeatCount:1.0f];
    [pathAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
    circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath;
    circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius, CGRectGetMidY(self.view.frame)-radius);
    [circle addAnimation:pathAnimation forKey:@"changePathAnimation"];
}

-animateImageView 在点击条形按钮时运行。不知何故，动画不那么流畅，圆圈似乎没有从屏幕中心长出来。

请指出代码中的错误。谢谢。

【问题讨论】：

您需要比not as smooth and is not seeming to 更准确地定义问题。另外，你有什么办法解决这个问题？
圆在从零半径调整到全半径时左右摇摆，然后在屏幕中心附近稳定下来。请在问题陈述中说明任何进一步的混淆。
为什么不创建最终尺寸路径，然后为简单的比例变换设置动画 - 这样中心位置就不会改变。另外，你真的应该设置锚点吗？
我不知道缩放和变换功能。您能否向我展示一些有关如何实现此目的的示例代码。谢谢。
看看stackoverflow.com/questions/9837384/…

标签： ios objective-c geometry uiviewanimation cashapelayer

【解决方案1】：

试试下面的代码，这对我有用。我认为问题在于设置正确的路径。那么请问我是如何计算下面代码中的路径的。

- (void)viewDidLoad
{
  [super viewDidLoad];

  circleRadius = 200.0f;
  CGPoint ptCenter = self.view.center;

  circle = [CAShapeLayer layer];
  circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(ptCenter.x - circleRadius, ptCenter.y - circleRadius, 2.0f * circleRadius, 2.0f * circleRadius) cornerRadius:circleRadius].CGPath;

  [circle setFillColor:[UIColor redColor].CGColor];
  [circle setStrokeColor:[UIColor colorWithWhite:0.9f alpha:0.7f].CGColor];
  [circle setLineWidth:0.0f];

  [self.view.layer addSublayer:circle];
  //[self drawCircleWithRadius:circleRadius];
}

- (IBAction)onTap:(id)sender
{
  [self animateImageView];
}

- (void)animateImageView
{
   circleRadius += 70.0f;
   [self drawCircleWithRadius:circleRadius];
}

- (void)drawCircleWithRadius:(CGFloat)radius 
{

  CGPoint ptCenter = self.view.center;
  CGRect rectBezierPath = CGRectMake(ptCenter.x - radius, ptCenter.y - radius, 2.0f * radius, 2.0f * radius);

  CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];

  [pathAnimation setFromValue:(id)circle.path];
  [pathAnimation setToValue:(id)[UIBezierPath bezierPathWithRoundedRect:rectBezierPath cornerRadius:circleRadius].CGPath];

  [pathAnimation setDuration:0.5f];
  [pathAnimation setRepeatCount:1.0f];

  [pathAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];

  circle.path = [UIBezierPath bezierPathWithRoundedRect:rectBezierPath cornerRadius:circleRadius].CGPath;
  [circle addAnimation:pathAnimation forKey:@"changePathAnimation"];
}

【讨论】：