Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UIView animation jumps at beginning

I'm running this code...

[UIView animateWithDuration:0.2                       delay:0.0                     options:UIViewAnimationOptionCurveEaseOut                  animations:^{                       CGAffineTransform settingsTransform = CGAffineTransformMakeTranslation(self.settingsView.frame.size.width, 0);                      CGAffineTransform speedTransform = CGAffineTransformMakeTranslation(-self.speedView.frame.size.width, 0);                       self.settingsView.transform = settingsTransform;                      self.speedView.transform = speedTransform;                   } completion:nil]; 

But when it runs the views jump half the transform in the opposite direction before sliding to half a position in the correct direction.

I've slowed down the animation duration to 5 seconds but the initial jump is instantaneous and half the transformation in the wrong direction.

When I animate back using this code...

[UIView animateWithDuration:0.2                       delay:0.0                     options:UIViewAnimationOptionCurveEaseOut                  animations:^{                      self.settingsView.transform = CGAffineTransformIdentity;                      self.speedView.transform = CGAffineTransformIdentity;                  } completion:nil]; 

It does exactly the same thing.

The result is that the final movement is half the desired transform as it jumps half the transform in the wrong direction first.

I really can't work out why this is happening?

Any ideas.

::EDIT::

Clearing up some possible ambiguity.

I'm not trying to have these views "bounce" back to where they are. The views I'm animating are like control panel at the edge of the screen. When the user presses "go" the view then slide out of the way. When the user presses "stop" the panels slide back into the view.

At least they used to. Since enabling auto layout (which I need for other parts of the app) I can't just change the frame of the views so I went the the transform route.

You can see this effect by sticking a view into a view controller and a button to run the animation.

Thanks

like image 489
Fogmeister Avatar asked Sep 21 '12 17:09

Fogmeister


1 Answers

I had the exact same problem so here is the solution I came up with.

    CGAffineTransform transform = CGAffineTransformMake(1, 0, 0, 1, translation.x, translation.y);     [UIView animateWithDuration:0.25 animations:^{         _assetImageView.transform = transform;         [self.view layoutIfNeeded];     } completion:^(BOOL finished) {     }]; 

So I call [self.view layoutIfNeeded]; inside of the animate block. Without this the it has the same problem as you and jumps the distance negative translation first then animates to the correct position from there. I am calling this from a view controller so self is a sub class of UIViewController. In your case "self.view" may not exist but I hope you get the idea.

like image 75
David Nesbitt Avatar answered Oct 04 '22 14:10

David Nesbitt