Search code examples
objective-ccocoa-touchuiviewcore-animationcakeyframeanimation

Setting start position of CAKeyframeAnimation that follows an elliptical path


I am trying to animate a UIView in a circle using a CAKeyframeAnimation that follows a path created with CGPathAddEllipseInRect, which I have set up fine. Is there a way, however, to set the start position of the animation? My code is:

//set up animation
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.duration = 10.0;
pathAnimation.repeatCount = 1000;
CGMutablePathRef curvedPath = CGPathCreateMutable();

//path as a circle
CGRect bounds = CGRectMake(60,170,200,200);
CGPathAddEllipseInRect(curvedPath, NULL, bounds);

//tell animation to use this path
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);

//add subview
circleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ball.png"]];    
[testView addSubview:circleView];

//animate
[circleView.layer addAnimation:pathAnimation forKey:@"moveTheSquare"];

Solution

  • Use CGPathAddArc instead of CGPathAddEllipseInRect. For example:

    CGFloat radiansForHour(CGFloat hour)
    {
        return 2 * M_PI * (hour - 3) / 12;
    }
    
    ...
        CGPathAddArc(curvedPath, NULL, 160, 270, 100, radiansForHour(11), radiansForHour(12 + 11), NO);
    

    Note that if you want it to move through 12 hours, the endAngle parameter must be 12 hours more than the startAngle.