title: iOS - Animation of many different views
body: <p>I'm trying to implement animations on many different <code>UIView</code> and <code>UIImageView</code> to make them consecutively fade in, move up and fade out one by one. This includes a very long series of animation, and I use simple <code>UIView</code> animation blocks with delay to make the moves happen one after another like this (which is a very small excerpt of the whole animation flow):</p>
  
  <pre><code>// Start animation
      [UIView animateWithDuration:0.1
                            delay:0.0
                          options:UIViewAnimationOptionCurveLinear
                       animations:^{
                           redIcon1Image.alpha = 0.3;
                       }
                       completion:nil];
      [UIView animateWithDuration:0.1
                            delay:0.1
                          options:UIViewAnimationOptionCurveLinear
                       animations:^{
                           redIcon1Image.frame = CGRectMake(33, 56, 73, 73);
                           redIcon1Image.alpha = 1;
                       }
                       completion:nil];
      [UIView animateWithDuration:0.1
                            delay:0.2
                          options:UIViewAnimationOptionCurveLinear
                       animations:^{
                           redIcon2Image.alpha = 0.3;
                       }
                       completion:nil];
      [UIView animateWithDuration:0.1
                            delay:0.3
                          options:UIViewAnimationOptionCurveLinear
                       animations:^{
                           redIcon2Image.frame = CGRectMake(127, 33, 68, 68);
                           redIcon2Image.alpha = 1;
                           doc1Image.alpha = 0.3;
                       }
                       completion:nil];
      [UIView animateWithDuration:0.1
                            delay:0.4
                          options:UIViewAnimationOptionCurveLinear
                       animations:^{
                           doc1Image.alpha = 1;
                           redIcon2Image.frame = CGRectMake(123, 28, 73, 73);
                           redIcon3Image.alpha = 0.3;
                       }
                       completion:nil];
      [UIView animateWithDuration:0.1
                            delay:0.5
                          options:UIViewAnimationOptionCurveLinear
                       animations:^{
                           redIcon3Image.frame = CGRectMake(221, 53, 68, 68);
                           redIcon3Image.alpha = 1;
                           doc2Image.alpha = 0.3;
                       }
                       completion:nil];
      [UIView animateWithDuration:0.1
                            delay:0.6
                          options:UIViewAnimationOptionCurveLinear
                       animations:^{
                           redIcon3Image.frame = CGRectMake(218, 56, 73, 73);
                           doc2Image.alpha = 1;
                           doc3Image.alpha = 0.2;
                           glowView.alpha = 0.2;
                       }
                       completion:nil];
  
      [UIView animateWithDuration:0.1
                            delay:0.7
                          options:UIViewAnimationOptionCurveLinear
                       animations:^{
                           doc3Image.alpha = 0.6;
                           glowView.alpha = 0.5;
                       }
                       completion:nil];
  
      [UIView animateWithDuration:0.1
                            delay:0.8
                          options:UIViewAnimationOptionCurveLinear
                       animations:^{
                           doc3Image.alpha = 1;
                           glowView.alpha = 0.8;
                       }
                       completion:nil];
  </code></pre>
  
  <p>The thing is, although some views are set to be visible (alpha > 0) with delay, I can still see them being visible right when the animation starts. Could there be something wrong with the way I set the <code>delay</code>? I can't use the <code>completion</code> block in this situation because it would make a very complicated nested animation block. What should I do to make sure the animation runs smoothly? Please suggest and thanks.</p>
  
  <p><strong>Edit:</strong> I did set every view to be invisible, i.e. alpha = 0.0, before starting the animation. Also, I put all the animation in my <code>viewDidLoad</code> method. </p>