ios – 沿着弧线动画一个UIView

我希望沿着一个弧线,从位置1到位置2的图像所示的动画.

实际发生的是视图动画描述了一个完整的圆形而不是圆弧.我的问题是：

>我应该使用CGPathAddArc还是CGPathAddArcToPoint？
>我需要使用CGPathMoveToPoint来描述视图的初始位置吗？

当我通过代码时,CGPoints值正如我预期的那样,角度也是如此.

我使用以下函数获取一个圆圈上的CGPoint

CGPoint pointOnCircle(CGPoint centre,float radius,float angle)
{
    float x = centre.x + radius * cosf(angle);
    float y = centre.y + radius * sinf(angle);

    return CGPointMake(x,y);
}

我使用以下代码和变体,但是我还没有设法破解它.

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.duration = duration;
pathAnimation.repeatCount = 1;

CGPoint viewCenter = dynamicView.objectCenter;
CGMutablePathRef arcPath = CGPathCreateMutable();
//  CGPathMoveToPoint(arcPath,NULL,viewCenter.x,viewCenter.y);

//work out the half way point
float halfwayAngle = dynamicView.angle + (0.5f * self.angleIncrement);
float fullwayAngle = dynamicView.angle + self.angleIncrement;
CGPoint halfwayPoint = pointOnCircle(self.center,self.radius,halfwayAngle);
CGPoint fullwayPoint = pointOnCircle(self.center,fullwayAngle);

CGPathAddArc(arcPath,halfwayPoint.x,halfwayPoint.y,dynamicView.angle,fullwayAngle,clockwise);
//    CGPathAddArcToPoint(arcPath,viewCenter.y,fullwayPoint.x,fullwayPoint.y,self.radius);

pathAnimation.path = arcPath;
CGPathRelease(arcPath);

[dynamicView.layer addAnimation:pathAnimation forKey:@"arc"];

解决方法

我编写了一个快速的例子,希望把它放在一起.我从“单一视图”应用程序模板开始,并将该操作添加到视图控制器以及一个按钮来触发操作.

- (IBAction)animateArc:(id)sender
{
    // Create the arc
    CGPoint arcStart = CGPointMake(0.2 * self.view.bounds.size.width,0.5 * self.view.bounds.size.height);
    CGPoint arcCenter = CGPointMake(0.5 * self.view.bounds.size.width,0.5 * self.view.bounds.size.height);
    CGFloat arcRadius = 0.3 * MIN(self.view.bounds.size.width,self.view.bounds.size.height);

    CGMutablePathRef arcPath = CGPathCreateMutable();
    CGPathMoveToPoint(arcPath,arcStart.x,arcStart.y);
    CGPathAddArc(arcPath,arcCenter.x,arcCenter.y,arcRadius,M_PI,NO);

    // The layer we're going to animate (a 50x50pt red box)
    UIView* dynamicView = [[UIView alloc] initWithFrame: CGRectMake(0,50,50)];
    dynamicView.layer.backgroundColor = [[UIColor redColor] CGColor];
    [self.view addSubview: dynamicView];
    dynamicView.center = arcStart;

    // An additional view that shows the arc.
    BOOL showArc = NO;
    UIView* drawArcView = nil;
    if (showArc)
    {
        drawArcView = [[UIView alloc] initWithFrame: self.view.bounds];
        CAShapeLayer* showArcLayer = [[CAShapeLayer alloc] init];
        showArcLayer.frame = drawArcView.layer.bounds;
        showArcLayer.path = arcPath;
        showArcLayer.strokeColor = [[UIColor blackColor] CGColor];
        showArcLayer.fillColor = nil;
        showArcLayer.lineWidth = 3.0;
        [drawArcView.layer addSublayer: showArcLayer];
        [self.view insertSubview: drawArcView belowSubview: dynamicView];
    }

    // The animation
    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    pathAnimation.calculationMode = kCAAnimationPaced;
    pathAnimation.duration = 5.0;
    pathAnimation.path = arcPath;
    CGPathRelease(arcPath);

    // Add the animation and reset the state so we can run again.
    [CATransaction begin];
    [CATransaction setCompletionBlock:^{
        [drawArcView removeFromSuperview];
        [dynamicView removeFromSuperview];
    }];
    [dynamicView.layer addAnimation:pathAnimation forKey:@"arc"];
    [CATransaction commit];
}