40

I have a problem with the setting UIViewAnimationOptionAutoReverse. Here is my code.

CALayer *aniLayer = act.viewToChange.layer;
[UIView animateWithDuration:2.0 delay:1.0 options:(UIViewAnimationCurveLinear | UIViewAnimationOptionAutoreverse) animations:^{
                    viewToAnimate.frame = GCRectMake(1,1,100,100);
                    [aniLayer setValue:[NSNumber numberWithFloat:degreesToRadians(34)] forKeyPath:@"transform.rotation"];
                } completion:nil ];

The problem is that, after the animation has reversed, the view jumps back to the frame set in the animation block. I want the view to grow and "ungrow" and stop at its original position.

Is there a solution without programming two consecutive animations?

jscs
  • 63,694
  • 13
  • 151
  • 195
Stultus
  • 814
  • 2
  • 11
  • 15

4 Answers4

100

You have three options.

When you use the -[UIView animateWithDuration:…] methods, the changes you make in the animations block are applied immediately to the views in question. However, there is also an implicit CAAnimation applied to the view that animates from the old value to the new value. When a CAAnimation is active on a view, it changes the displayed view, but does not change the actual properties of the view.

For example, if you do this:

NSLog(@"old center: %@", NSStringFromCGPoint(someView.center));
[UIView animateWithDuration:2.0 animations: ^{ someView.center = newPoint; }];
NSLog(@"new center: %@", NSStringFromCGPoint(someView.center));

you will see that 'old center' and 'new center' are different; new center will immediately reflect the values of newPoint. However, the CAAnimation that was implicitly created will cause the view to still be displayed at the old center and smoothly move its way to the new center. When the animation finishes, it is removed from the view and you switch back to just seeing the actual model values.

When you pass UIViewAnimationOptionAutoreverse, it affects the implicitly created CAAnimation, but does NOT affect the actual change you're making to the values. That is, if our example above had the UIViewAnimationOptionAutoreverse defined, then the implicitly created CAAnimation would animate from oldCenter to newCenter and back. The animation would then be removed, and we'd switch back to seeing the values we set… which is still at the new position.

As I said, there are three ways to deal with this. The first is to add a completion block on the animation to reverse it, like so:

First Option

CGPoint oldCenter = someView.center;
[UIView animateWithDuration:2.0
                 animations: ^{ someView.center = newPoint; }
                 completion: 
   ^(BOOL finished) {
       [UIView animateWithDuration:2.0
                        animations:^{ someView.center = oldCenter; }];
   }];

Second Option

The second option is to autoreverse the animation like you're doing, and set the view back to its original position in a completion block:

CGPoint oldCenter = someView.center;
[UIView animateWithDuration:2.0
                      delay:0
                    options: UIViewAnimationOptionAutoreverse
                 animations: ^{ someView.center = newPoint; }
                 completion: ^(BOOL finished) { someView.center = oldCenter; }];

However, this may cause flickering between the time that the animation autoreverse completes and when the completion block runs, so it's probably not your best choice.

Third Option

The last option is to simply create a CAAnimation directly. When you don't actually want to change the final value of the property you're changing, this is often simpler.

#import <QuartzCore/QuartzCore.h>

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.autoreverses = YES;
animation.repeatCount = 1; // Play it just once, and then reverse it
animation.toValue = [NSValue valueWithCGPoint:newPoint];
[someView.layer addAnimation:animation forKey:nil];

Note that the CAAnimation way of doing things never changes the actual values of the view; it just masks the actual values with an animation. The view still thinks it's in the original location. (This means, for example, that if your view responds to touch events, it will still be watching for those touch events to happen at the original location. The animation only changes the way the view draws; nothing else.

The CAAnimation way also requires that you add it to the view's underlying CALayer. If this scares you, feel free to use the -[UIView animateWithDuration:…] methods instead. There's additional functionality available by using CAAnimation, but if it's something you're not familiar with, chaining UIView animations or resetting it in the completion block is perfectly acceptable. In fact, that's one of the main purposes of the completion block.

So, there you go. Three different ways to reverse an animation and keep the original value. Enjoy!

BJ Homer
  • 48,806
  • 11
  • 116
  • 129
  • 1
    Nice answer. Regarding the Second Option''s completion block, could you explain how to avoid the 'flash' effect that occurs when executing `someView.center = oldCenter;` ? After the animation completes, the view is then positioned at `newPoint` and then moved back to `oldCenter` very quickly, causing an undesired 'flash' effect. Do you know how to avoid that? – Eduardo Coelho Jul 28 '11 at 17:37
  • I don't have a test bed up at the moment, but it occurs to me that setting someView.center = oldCenter immediately *after* the call to `animateWithDuration...` might actually fix this. And then you wouldn't need the completion handler. Could you try that and let me know? If it works, I'll edit the answer. – BJ Homer Jul 28 '11 at 18:05
  • 1
    If I set `someView.center = oldCenter;` right after the `animateWithDuration:...` method the animation simply doesn't happen. Note that I only noticed the undesired effect commented above when running the animation in a device (in the simulator the animation went smoothly). – Eduardo Coelho Jul 28 '11 at 23:35
  • BTW, what about animating 1.5x and doing the rest by yourself? Check my answer. – Rudolf Adamkovič Jul 26 '12 at 13:35
  • This is awesome answer! Thank you for your explanations and 'CAAnimation' option – Valentin Shamardin Jun 17 '15 at 08:30
  • This is an awesome answer, thanks for detailed explanation. For clarity could you please confirm whether you need to use `UIViewAnimationOptionRepeat` with `UIViewAnimationOptionAutoreverse` in your second option? – andrewbuilder Apr 07 '16 at 17:00
  • Thorough, beautiful explained, with multiple examples to get to the end result. Very well done. Thank you. – Mike Simz Jan 25 '18 at 15:05
14

Here's my solution. For 2x repeat, animate 1.5x and do the last 0.5x part by yourself:

[UIView animateWithDuration:.3
                      delay:.0f
                    options:(UIViewAnimationOptionRepeat|
                             UIViewAnimationOptionAutoreverse)
                 animations:^{
                     [UIView setAnimationRepeatCount:1.5f];

                     ... animate here ...

                 } completion:^(BOOL finished) {
                         [UIView animateWithDuration:.3 animations:^{

                             ... finish the animation here ....

                         }];
                 }];

No flashing, works nice.

Rudolf Adamkovič
  • 31,030
  • 13
  • 103
  • 118
0

There is a repeatCount property on CAMediaTiming. I think you have to create an explicit CAAnimation object, and configure it properly. The repeatCount for grow and ungrow would be 2, but you can test this.

Something a long the lines of this. You would need two CAAnimation objects though, one for the frame and one for the rotation.

CABasicAnimation *theAnimation;

theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation"];
theAnimation.duration=3.0;
theAnimation.repeatCount=1;
theAnimation.autoreverses=YES;
theAnimation.fromValue=[NSNumber numberWithFloat:0.0];
theAnimation.toValue=[NSNumber numberWithFloat:degreesToRadians(34)];
[theLayer addAnimation:theAnimation forKey:@"animateRotation"];

AFAIK there is no way to avoid programming two animation objects.

GorillaPatch
  • 5,007
  • 1
  • 39
  • 56
  • Setting autoreverses = YES and repeatCount = 2 would cause the animation to grow, shrink, then grow and shrink again. The autoreverse happens for each repetition of the animation. – BJ Homer Feb 18 '11 at 17:54
  • Thanks for the insight. I was not sure about how it is counted. – GorillaPatch Feb 18 '11 at 18:28
0

Here is a Swift version of @Rudolf Adamkovič's answer, where you set the animation to run 1.5 times and in the completion block run a 'reverse' animation one final time.

In the below snippet I am translating my view by -10.0 pts on the y-axis 1.5 times. Then in the completion block I animate my view one final time back to its original y-axis position of 0.0.

UIView.animate(withDuration: 0.5, delay: 0.5, options: [.repeat, .autoreverse], animations: {

    UIView.setAnimationRepeatCount(1.5)
    self.myView.transform = CGAffineTransform(translationX: 0.0, y: -10.0)
            
}, completion: { finished in
            
    UIView.animate(withDuration: 0.5, delay: 0, options: [], animations: {

        self.myView.transform = CGAffineTransform(translationX: 0.0, y: 0.0)

    }, completion: nil) 
})
JTODR
  • 318
  • 2
  • 10