Resolved Start CAAnimation from UIView's current position

Discussion in 'iOS Programming' started by moonman239, Aug 25, 2014.

  1. moonman239, Aug 25, 2014
    Last edited: Sep 18, 2014

    moonman239 macrumors 68000

    Joined:
    Mar 27, 2009
    #1
    I want a UIView to move from where it is before the animation, along an elliptical path, back to the starting point. In reality, the view jumps to another point, circles back to that point, then jumps back to where it was when the view controller's view appeared.

    Here is the code that makes the animation happen:
    Code:
    CGPathRef animationPath = CGPathCreateWithEllipseInRect([[self view] frame], nil);
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        animation.path = animationPath;
        animation.speed = 0.1;
        [[[self racecarImageView] layer] addAnimation:animation forKey:@"position"];
    
     
  2. moonman239 thread starter macrumors 68000

    Joined:
    Mar 27, 2009
    #2
    I should add that the view's center, while being animated, never goes to the point from which it originated. I also tried using this code:

    Code:
        CGRect track = CGRectMake((imageViewCenter.x + 200), imageViewCenter.y, 400, 400);
        CGPathRef animationPath = CGPathCreateWithEllipseInRect(track,nil);
    
    but that didn't seem to fix the problem.
     
  3. moonman239 thread starter macrumors 68000

    Joined:
    Mar 27, 2009
    #3
    The code below doesn't work. It does animate the view, but it does nothing that the code I posted doesn't do.

    Code:
    CALayer *layer = [[self racecarImageView] layer];
    CGRect trackRect = CGRectMake(layer.position.x + 200, layer.position.y, 400, 400);
    CGPathMoveToPoint(track, nil, layer.position.x, layer.position.y);
    
    I can't, for the life of me, figure out what's wrong. Will someone please help me?
     
  4. moonman239 thread starter macrumors 68000

    Joined:
    Mar 27, 2009
    #4
    OK, I found this piece of code on Stack Overflow (Core Animation rotation around point):

    Code:
        CGPoint rotationPoint = CGPointMake(view.center.x, view.center.y);
        CGFloat minX   = CGRectGetMinX(view.frame);
        CGFloat minY   = CGRectGetMinY(view.frame);
        CGFloat width  = CGRectGetWidth(view.frame);
        CGFloat height = CGRectGetHeight(view.frame);
        
        CGPoint anchorPoint =  CGPointMake((rotationPoint.x-minX)/width,
                                           (rotationPoint.y-minY)/height);
        
        view.layer.anchorPoint = anchorPoint;
        view.layer.position = rotationPoint;
    
    Now I just have to figure out how to make a basic animation that causes the image view to rotate in a circle.
     
  5. moonman239 thread starter macrumors 68000

    Joined:
    Mar 27, 2009
    #5
    I devised what I thought would be an alternative solution:

    Code:
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:200 startAngle:M_PI endAngle:M_2_PI clockwise:true];
        [circlePath addArcWithCenter:arcCenter radius:200 startAngle:M_2_PI endAngle:M_PI clockwise:true];
        CALayer *layer = [[self racecarImageView] layer];
        CAKeyframeAnimation *motionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        motionAnimation.path = circlePath.CGPath;
        motionAnimation.duration = 3;
        motionAnimation.calculationMode = kCAAnimationLinear;
    
    The image slows to a pause once it completes a half-circle rotation around the given point, then continues, as if the app was doing two animations consecutively.
     
  6. moonman239 thread starter macrumors 68000

    Joined:
    Mar 27, 2009
    #6
    Eureka! I found the solution! The code I posted below doesn't cause the image view to do a complete rotation, but it comes pretty darn close. What I did was tell the app to create a bezier path with an arc that has a central angle that is only 3/1000 of 2pi. This bezier path is the path that the image view will follow as it moves.

    Code:
     UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:circleCenter radius:200 startAngle:M_PI endAngle:(1.001 * M_PI) clockwise:false];
        [circlePath moveToPoint:racecarImageViewCenter];
    
     
  7. moonman239, Sep 18, 2014
    Last edited: Sep 18, 2014

    moonman239 thread starter macrumors 68000

    Joined:
    Mar 27, 2009
    #7
    OK, that's not going to work.

    Edit: Oops, wrong thread.
     

Share This Page