title: CoreAnimation - Opacity Fade In and Out Animation Not Working
body: <p>I'm attempting to create a fairly simple CoreAnimation for use in an <code>AVComposition</code>. My goal is to create a <code>CALayer</code> which, through various sublayers, fades a title in and out, then fades in an out images. A slideshow, basically. This is being exported to a .mov using <code>AVAssetWriter</code>. </p>
  
  <p>With help from the WWDC 2011 AVEditDemo, I've been able to get a title and images appearing. The problem is that they are all on screen at the same time!</p>
  
  <p>I have created each layer with an opacity of 0.0. I have then added an <code>CABasicAnimation</code> to fade them from 0.0 to 1.0, using the following code:</p>
  
  <pre><code>CABasicAnimation *fadeInAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
  fadeInAnimation.fromValue = [NSNumber numberWithFloat:0.0];
  fadeInAnimation.toValue = [NSNumber numberWithFloat:1.0];
  fadeInAnimation.additive = NO;
  fadeInAnimation.removedOnCompletion = YES;
  fadeInAnimation.beginTime = 1.0;
  fadeInAnimation.duration = 1.0;
  fadeInAnimation.fillMode = kCAFillModeForwards;
  [titleLayer addAnimation:fadeInAnimation forKey:nil];
  </code></pre>
  
  <p>The problem seems to be the 'beginTime' property. The "1.0" is meant to be a delay, so it starts 1 second after the start of the animation. However, it is appearing on the screen straight away. A fade out animation</p>
  
  <p>The reverse of this code, for the fade out, simply changes the fromValue to 1.0 and the toValue to 0.0. It has a begin time of 4.0 and works perfectly.</p>
  
  <p>I'm using the following to create the <code>animatedTitleLayer</code>:</p>
  
  <pre><code>CATextLayer *titleLayer = [CATextLayer layer];
  titleLayer.string =self.album.title;
  titleLayer.font = @"Helvetica";
  titleLayer.fontSize = videoSize.height / 6;
  titleLayer.alignmentMode = kCAAlignmentCenter;
  titleLayer.bounds = CGRectMake(0, 0, videoSize.width, videoSize.height / 6);
  titleLayer.foregroundColor = [[UIColor redColor]CGColor];
  titleLayer.opacity = 0.0;
  </code></pre>
  
  <p>The image fade in animations have a beginTime 5 seconds apart. Like the title, their fade out animations work fine.</p>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p>Cheers!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The answers were all helpful, but ultimately I discovered that only one animation could be added to a <code>CALayer</code>. The fade out animation was working as it was the last one added. </p>
  
  <p>I then tried a CAAnimationGroup, but this didn't work as I was modifying the same key value path.</p>
  
  <p>So I've realised that a <code>CAKeyframeAnimation</code> is the best for this. Only I'm having some difficulty with that too! The code is now fading in okay, but it isn't fading out. I've tried various fillMode's, changed the duration, etc. Can't make it work!!</p>
  
  <p>Here is my code:</p>
  
  <pre><code>    CAKeyframeAnimation *fadeInAndOut = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
      fadeInAndOut.duration = 5.0;
      fadeInAndOut.autoreverses = NO;
      fadeInAndOut.keyTimes = [NSArray arrayWithObjects:  [NSNumber numberWithFloat:0.0],
                                                              [NSNumber numberWithFloat:1.0],
                                                      [NSNumber numberWithFloat:4.0], 
                                                      [NSNumber numberWithFloat:5.0], nil];
  
      fadeInAndOut.values = [NSArray arrayWithObjects:    [NSNumber numberWithFloat:0.0],
                                                      [NSNumber numberWithFloat:1.0],
                                                      [NSNumber numberWithFloat:1.0], 
                                                      [NSNumber numberWithFloat:0.0], nil];
      fadeInAndOut.beginTime = 1.0;
      fadeInAndOut.removedOnCompletion = NO;
      fadeInAndOut.fillMode = kCAFillModeBoth;
      [titleLayer addAnimation:fadeInAndOut forKey:nil]; 
  </code></pre>