2013-08-01 2 views
11

Я хочу, чтобы оживить вид вдоль дуги, как показано на рисунке из положения 1 в положение 2.анимировать в UIView по дуге

enter image description here

Что на самом деле происходит то, что вид анимации описывает полный круг вместо дуги. Мои вопросы:

  1. Должен ли я использовать CGPathAddArc или CGPathAddArcToPoint?
  2. Нужно ли использовать CGPathMoveToPoint, чтобы описать начальное местоположение вида или нет?

Когда я просматриваю код, значения CGPoints являются такими, какими я их ожидал, как и углы.

Я использую следующую функцию, чтобы получить 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); 
} 

Я использую следующий код и его варианты, но пока я не удалось взломать.

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"]; 
+1

'MoveToPoint' в первую позицию, затем' AddArcToPoint' ко второму. – Kevin

ответ

9

Я закодировал быстрый пример, который, надеюсь, объединяет все это. Я начал с шаблона приложения «единого вида» и добавил это действие к контроллеру представления вместе с кнопкой для запуска действия.

- (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]; 
} 
+0

Принято потому, что это демонстрирует метод выполнения моих заданий. В конце концов я пошел другим путем. +1 полностью рабочий код – Damo

1

В конце концов я использовал 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; 
Смежные вопросы