Spiral path animation using CGMutablePathRef

Question

I'm trying to animate a view from the center of the screen to the upper left corner in a spiral-type motion. Here's what I'm doing:

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

The view moves to each point on the curve, but it's not smooth, and not very curvy either. It just moves in pretty much a straight line to each point. Why isn't the path curved? I'm using this as a reference.

Answer 1

If you want a more smooth spiral, you could use the following function. It' s possible to adjust the code to have an opening spiral also.

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

Then, you will just need a simple code like that to make the path:

    CGMutablePathRef pathToDraw = CGPathCreateMutable();

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