動畫一個UIView沿弧線

Question

我希望進行動畫沿弧線的視圖，作爲示出的圖像中從位置1到位置2

什麼實際發生的是，視圖的動畫描述了一種全圓而不是弧。我的問題是：

1. 我應該使用CGPathAddArc或CGPathAddArcToPoint？
2. 我是否需要使用CGPathMoveToPoint來描述視圖的初始位置？

當我單步執行代碼時，CGPoints值與我預期的一樣，正如角度一樣。

我用下面的函數來獲得

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

我使用下面的代碼及其變體，但至今我還沒有設法破解它的圓CGPoints。

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, self.radius, fullwayAngle); 

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

pathAnimation.path = arcPath; 
CGPathRelease(arcPath); 

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

Answer 1

我編寫了一個快速的例子，希望把它放在一起。我從「單視圖」應用程序模板開始，並將此操作與按鈕一起添加到視圖控制器以觸發操作。

- (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, NULL, arcStart.x, arcStart.y); 
    CGPathAddArc(arcPath, NULL, arcCenter.x, arcCenter.y, arcRadius, M_PI, 0, NO); 

    // The layer we're going to animate (a 50x50pt red box) 
    UIView* dynamicView = [[UIView alloc] initWithFrame: CGRectMake(0, 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]; 
} 

Answer 2

最後我用CGPathAddRelativeArc得到我想要的過渡。

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

float angleOfRotation = self.angleIncrement; 
if (clockwise == NO) 
{ 
    angleOfRotation *= -1.0f; 
} 

float fullwayAngle = dynamicView.angle + angleOfRotation; 
CGPoint fullwayPoint = pointOnCircle(self.center, self.radius, fullwayAngle); 

CGPathAddRelativeArc(arcPath, NULL, self.center.x, self.center.y, self.radius, dynamicView.angle, angleOfRotation); 
pathAnimation.path = arcPath; 
CGPathRelease(arcPath); 

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

dynamicView.angle = fullwayAngle; 
dynamicView.objectCenter = fullwayPoint;