CODEWITHSUNDEEP
objective-cioscocoa-touchanimationuiview
Alex Stone
Alex Stone

Reputation: 47348

Animate center point of a view along a quadratic curve

I have an app that stores user events in history. The events are added on one controller and are displayed in a controller within a different tab.

I would like to add a visual confirmation that an event has been recorded when a user taps "save button". I'm thinking of animating an interface element to move towards a tab bar controller that is responsible for showing records to the user.

Animation curve

In order to do so, I'm thinking of animating the center point of one of my interface elements. I know how to animate the center point, but it does so in a straight line. How can I animate the center point in a more "curved" way? Is there some way to accomplish this? 

CGPoint center = self.ratingReticle.center;

[UIView animateWithDuration:0.6 delay:0 options:UIViewAnimationCurveEaseIn animations:^{
    //move the element offscreen
     self.ratingReticle.center = CGPointMake(260,500);

} completion:^(BOOL finished) {
    //hide the interace element once it is offscreen
    self.ratingReticle.alpha = 0;
    //restore the position of the interface element
    self.ratingReticle.center = center;

    [ UIView animateWithDuration:0.4 animations:^{
        //fade the element back at the original position
        self.ratingReticle.alpha = 1;
    } completion:^(BOOL finished) {

    }];

}];

Upvotes: 2

Views: 920

Answers (1)

sergio
sergio

Reputation: 69027

You could that using Core Animation to move your object along a Bezier curve using CAKeyFrameAnimation.

-(void)animate
{
  CAKeyframeAnimation *posAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
  posAnim.path = [self bezierPath];
  [image.layer addAnimation:posAnim forKey:@"posAnim"];
}

where bezierPath returns a CGPathRef that suits your case.

Upvotes: 5

Related Questions