沿弧形动画UIView

时间:2013-08-01 13:39:01

标签: ios core-graphics

我希望沿着弧线设置一个视图动画,如图像从位置1到位置2所示。

enter image description here

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

  1. 我应该使用 CGPathAddArc 还是 CGPathAddArcToPoint
  2. 我是否需要使用 CGPathMoveToPoint 来描述视图的初始位置?
  3. 当我单步执行代码时,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"];
    

2 个答案:

答案 0 :(得分:9)

我编写了一个快速的例子,希望将它们放在一起。我从"单一视图开始#34;应用程序模板并将此操作添加到视图控制器以及触发操作的按钮。

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

答案 1 :(得分: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;