使用 CGMutablePathRef 的螺旋路径动画答案

【问题标题】：Spiral path animation using CGMutablePathRef使用 CGMutablePathRef 的螺旋路径动画
【发布时间】：2013-08-27 22:52:58
【问题描述】：

我正在尝试以螺旋式运动为从屏幕中心到左上角的视图设置动画。这就是我正在做的事情：

CGMutablePathRef curvedPath = CGPathCreateMutable();
    CGPathMoveToPoint(curvedPath, NULL, viewOrigin.x, viewOrigin.y);

        controlX1 = viewOrigin.x + halfScreenWidth*0.3;
        controlY1 = viewOrigin.y + halfScreenHeight*0.1;
        controlX2 = viewOrigin.x - halfScreenWidth*0.05;
        controlY2 = viewOrigin.y + halfScreenHeight*0.5;
        controlX3 = viewOrigin.x - halfScreenWidth*0.4;
        controlY3 = viewOrigin.y;

        rndX1 = viewOrigin.x + halfScreenWidth*.1;
        rndX2 = viewOrigin.x - halfScreenWidth*.40;
        rndY1 = viewOrigin.y + halfScreenHeight*.10;
        rndY2 = viewOrigin.y + halfScreenHeight*.35;
    }


    CGPathAddQuadCurveToPoint(curvedPath, NULL, controlX1, controlY1, rndX1, rndY1);
    CGPathAddQuadCurveToPoint(curvedPath, NULL, controlX2, controlY2, rndX2, rndY2);
    CGPathAddQuadCurveToPoint(curvedPath, NULL, controlX3, controlY3, endPoint.x, endPoint.y);

    pathAnimation.path = curvedPath;
    CGPathRelease(curvedPath);

CAAnimationGroup *group = [CAAnimationGroup animation];
    group.fillMode = kCAFillModeForwards;
    [group setAnimations:[NSArray arrayWithObjects: pathAnimation, nil]];
    group.duration = 3.0f;
    group.delegate = self;
    [group setValue:self.theView forKey:@"imageViewBeingAnimated"];

视图移动到曲线上的每个点，但它并不平滑，也不是很弯曲。它只是以几乎直线移动到每个点。为什么路径不弯曲？我使用this 作为参考。

【问题讨论】：

剩下的关键帧动画呢？
我不确定它是否相关，但我在上面添加了它。
我运行了您上面的代码（但必须为 endPath、viewOrigin、pathAnimation、theView 等填写一些我自己的值）。它确实遵循我期望的路径。我建议您将路径设置为描边形状图层，以查看路径是否真的是您认为的那样。否则，您需要提供更多信息，以便其他人能够重现该问题。

标签： ios core-animation quartz-2d cgpath

【解决方案1】：

如果你想要一个更平滑的螺旋，你可以使用下面的函数。也可以将代码调整为具有开口螺旋。

-(void)addEnteringSpiralOnPath: (CGMutablePathRef) path
                          size: (CGSize)size
                         turns: (int)turns
{
    CGPathMoveToPoint(path, NULL, size.width/2, 0); //To begining: Right

    for (int turn = turns; turn >= 1; turn--) {
        CGSize largeSize = CGSizeMake(size.width * turn/turns, size.height * turn/turns);
        CGSize smallSize = CGSizeMake(size.width * (turn-1) / turns, size.height * (turn-1) / turns);
        NSLog(@"Large: %@; Small: %@", NSStringFromCGSize(largeSize), NSStringFromCGSize(smallSize));

        CGFloat wStep = (largeSize.width/2 - smallSize.width/2 ) / 360;
        CGFloat hStep = (largeSize.height/2 - smallSize.height/2 ) / 360;

        for (CGFloat i = 0; i<=360; i = i + 10) {
            CGFloat iRad = i * M_PI / 180.0f;
            CGPoint p = CGPointMake(cosf(iRad) * (largeSize.width/2 - wStep * i),
                                    sinf(iRad) * (largeSize.height/2 - hStep * i));
            CGPathAddLineToPoint(path, nil, p.x, p.y);
        }
    }

}
-(void)addOpenningSpiralOnPath: (CGMutablePathRef) path
                          size: (CGSize)size
                         turns: (int)turns
{
    CGPathMoveToPoint(path, NULL, 0, 0); //To begining: Center

    for (int turn = 1; turn <= turns; turn++) {
        CGSize largeSize = CGSizeMake(size.width * turn/turns, size.height * turn/turns);
        CGSize smallSize = CGSizeMake(size.width * (turn-1) / turns, size.height * (turn-1) / turns);
        NSLog(@"Large: %@; Small: %@", NSStringFromCGSize(largeSize), NSStringFromCGSize(smallSize));

        CGFloat wStep = (largeSize.width/2 - smallSize.width/2 ) / 360;
        CGFloat hStep = (largeSize.height/2 - smallSize.height/2 ) / 360;

        for (CGFloat i = 0; i<=360; i = i + 10) {
            CGFloat iRad = i * M_PI / 180.0f;
            CGPoint p = CGPointMake(cosf(iRad) * (smallSize.width/2 + wStep * i),
                                    sinf(iRad) * (smallSize.height/2 + hStep * i));
            CGPathAddLineToPoint(path, nil, p.x, p.y);
        }
    }
}

然后，你只需要这样一个简单的代码来创建路径：

    CGMutablePathRef pathToDraw = CGPathCreateMutable();

    [self addEnteringSpiralOnPath:pathToDraw size:CGSizeMake(400, 400) turns:3];

【讨论】：