Spiral path animation using CGMutablePathRef - ios

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