位置に位置1からの画像に示すように、私は円弧に沿ってビューをアニメーション化したい

Question

円弧に沿ってのUIViewをアニメーション2

何実際に起こることビューアニメーションが完全に記述していることです円の代わりに円を描きます。私の質問は以下のとおりです。

1. 私はCGPathAddArcToPointCGPathAddArcまたはを使用する必要がありますか。
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;