Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Repeat the delay in a UIView animation loop?

I'm trying to do a customized animation on view opacity like this:

  1. Delay for 5 seconds; (The view will keep opaque for 5 seconds)
  2. Animate from opacity value 1 to 0;
  3. Delay for 5 seconds; (The view will keep transparent for 5 seconds)
  4. Animate from opacity value 0 to 1;

I want to repeat step 1 to 4 indefinitely: 1, 2, 3, 4, 1, 2, 3, 4,.....

Here is what I tried:

[UIView animateWithDuration:1
                      delay:5
                    options:UIViewAnimationOptionAutoreverse|UIViewAnimationOptionRepeat|UIViewAnimationOptionCurveEaseInOut
                 animations:^{
                     self.imageView.layer.opacity = 0;
                 }
                 completion:nil
 ];

But the delay only appeared once at the beginning, what I ended up with is:

1, 2, 4, 2, 4, 2, 4,.....

like image 317
X.Y. Avatar asked Jun 05 '13 07:06

X.Y.


2 Answers

I had the same problem. I solved in this way, with use of NSTimer

[NSTimer scheduledTimerWithTimeInterval: 2
                                     target: self
                                   selector:@selector(moveImage: )
                                   userInfo: nil repeats:YES];


}



-(void) moveImage: (NSTimer*)timer {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:2];
like image 169
Thymen Avatar answered Oct 31 '22 21:10

Thymen


@user1980004 Thanks for the hint on NSTimer. I'll just post the complete working code for my question:

// interface
@property (strong, nonatomic) IBOutlet UIImageView *imageView;
@property (strong, nonatomic) NSTimer *animationTimer;

-(void) viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    [self glowAnimation]; // Timer fires after a delay, so I need to fire animation for the first time

    // The interval value is determined by the sum of delay and duration for both the forward and reverse animation in glowAnimation function;
    self.animationTimer = [NSTimer scheduledTimerWithTimeInterval:12 target:self selector:@selector(glowAnimation) userInfo:nil repeats:YES];
}

-(void) viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];

    if (self.animationTimer){ 
        [self.animationTimer invalidate]; // Cancel the timer schedule
        self.animationTimer = nil;
    }
}

-(void) glowAnimation{
    // Forward and reverse animation are chained with delay in each.
    [UIView animateWithDuration:1
                          delay:5
                        options:UIViewAnimationOptionCurveEaseInOut
                     animations:^{
                         self.imageView.layer.opacity = 0;
                     }
                     completion:^(BOOL finished){
                         [UIView animateWithDuration:1
                                               delay:5
                                             options:UIViewAnimationOptionCurveEaseInOut
                                          animations:^{
                                              self.imageView.layer.opacity = 1;
                                          }
                                          completion:nil                          ];
                     }
     ];
}

All together the 1, 2, 3, 4, 1, 2, 3, 4 animation sequence in the question can be achieved.

like image 36
X.Y. Avatar answered Oct 31 '22 19:10

X.Y.