23

I want to animate my UIProgressView progression from 0 to 1 during 10 seconds.

Code:

[UIView animateWithDuration:10.0 animations:^{
    [_myProgressView setProgress:1 animated:YES];
} completion:(BOOL finished)^{
    if (finished) NSLog(@"animation finished);
}];

Animation is working fine except that completion and NSLog are always called instantly.

I tried animateWithDuration: withDelay: but the delay is not respected and executed immediately.

Has anyone encountered the same problem?

Thanks for you help.

Tulon
  • 4,011
  • 6
  • 36
  • 56
gobtronic
  • 331
  • 1
  • 2
  • 12

5 Answers5

53

Its an old problem but I am still posting the solution here. The solution turned out to be really simple. All you need to do is:

[_myProgressView setProgress:1];
[UIView animateWithDuration:10.0 animations:^{
    [_myProgressView layoutIfNeeded];
} completion:^(BOOL finished){
    if (finished) NSLog(@"animation finished");
}];

Here is a good explanation for why things were working incorrectly for you: http://blog.spacemanlabs.com/2012/08/premature-completion-an-embarrassing-problem/

So you can not use setProgress:animated: method to animate the progress view and get your desired behaviour of completion block as well. However, just setting progress inside the block will not animate it, since progress is not an animatable property.

Refer to apple documentation which says its necessary for the property to be animatable: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/#//apple_ref/occ/clm/UIView/animateWithDuration:animations:

So you just update the value of progress property outside the animate block and do the layout of the view inside the animate block.

CupawnTae
  • 14,192
  • 3
  • 29
  • 60
paresh
  • 1,174
  • 9
  • 13
  • 1
    very nice. For this case, you'd probably want to use linear timing curve `[UIView animateWithDuration:10.0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{` – CupawnTae May 23 '17 at 12:57
  • Correct answer, animating a animation using `UIView.animate(:)` is wrong and doesn't reset the animation layer on the end. – Pedro Paulo Amorim Sep 08 '17 at 11:21
  • Hi, guys **don't use** this line otherwise you will not able to see the **animation**. if you are moving on next Screen. `[_myProgressView setProgress:1.0f animated:YES];` – Anup Gupta Dec 22 '17 at 06:36
12

None of these answers really worked for me. I was able to get the progress to animate, but for some reason it had a delay in the beginning (especially for longer durations).

The key for me, was to call layoutIfNeeded inside an animation block and wait on the completion before doing the 2nd animation. This code is called from viewDidLoad. With the following code, I was able to achieve a perfectly smooth timer animation.

// For some reason, the first layoutIfNeeded() needs to be wrapped in an animation block, even though it is supposedly a synchronous call.  Otherwise, the progress just jumps right to 100%
UIView.animate(withDuration: 0.0, animations: {
    self.progressView.layoutIfNeeded()
}, completion: { finished in
    self.progressView.progress = 1.0

    UIView.animate(withDuration: self.timerDuration, delay: 0.0, options: [.curveLinear], animations: {
        self.progressView.layoutIfNeeded()
    }, completion: { finished in
        print("animation completed")
    })
})
pkamb
  • 33,281
  • 23
  • 160
  • 191
kwahn
  • 2,118
  • 2
  • 21
  • 17
3

Make it simple instead using NSTimer like, 

[progressview setProgress:0 animated:NO];
NSTimer *t=[NSTimer scheduledTimerWithTimeInterval: 1.0f
                                         target: self
                                       selector: @selector(progressupdate)
                                       userInfo: nil
                                        repeats: YES];

Below is the function which updates progress,

-(void)progressupdate{
   if(progressview.progress<1){
      [progressview setProgress:(progressview.progress+=0.2) animated:YES];
   }
   else{
      [t invalidate];
   }
}

Hope it helps....

Pradheep Narendran P
  • 419
  • 3
  • 16
2

What i found out is a set of both UIview animations and progress view animatons that work much nicer and animate the progressview smoothly. If you just use the combination of animation and progressview animation it is fired directly without regard to the UIview animation timer. 

-(void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    timer = [NSTimer scheduledTimerWithTimeInterval: 1.0f
                                             target: self
                                           selector: @selector(updateTimer)
                                           userInfo: nil
                                            repeats: YES];
}


- (void)updateTimer
{
    if (progressView.progress >= 1.0) {
        [timer invalidate];
    }
    [UIView animateWithDuration:1 animations:^{
        float newProgress = [self.progressView progress] + 0.125;
        [self.progressView setProgress:newProgress animated:YES];
    }];
}

Feel free to adjust the animation times to even better and smooth transitions

EmilDo
  • 1,177
  • 3
  • 16
  • 33
2

It's an old question, but I had a similar problem and here is my solution (sorry it's in Swift). The completion part is called when the animation finishes. It's inside a custom UIProgressView class.

override func setProgress(progress: Float, animated: Bool) {

    self.progress = progress
    if animated {
        let duration: NSTimeInterval = 10.0
        UIView.animateWithDuration(duration, delay: 0.0, options: UIViewAnimationOptions.CurveLinear, animations: {
            self.layoutIfNeeded()
            }, completion: { (completed) in
                self.animationDuration = nil
        })
    } else {
        self.layoutIfNeeded()
    }
}
Alexander Johmann
  • 86
  • 6