title: CATransaction: a view flashes on completion
body: <p>I'm writing a little bit complex animation, which goes in 2 steps:</p>
  
  <ol>
  <li>Change opacity to 0 of <code>UIViews</code> that are not need to be visible and move a <code>UIImageView</code> (which has <code>alpha = 1</code>) to another <code>CGPoint</code> (position).</li>
  <li>Change opacity of another <code>UIView</code> to 1 and the opacity of the <code>UIImageView</code> from the previous step to 0, and then after the animation of this step is finished, remove <code>UIImageView</code> from superview.</li>
  </ol>
  
  <p>I've done it this way:</p>
  
  <p>The <strong>first step</strong> is done without an explicit CATransaction. These 2 animations just have <code>beginTime</code> set to <code>CACurrentMediaTime()</code>. And I'm applying changes to the views right after <code>layer.addAnimation(...)</code> call.
  Everything works fine here.</p>
  
  <p>In the <strong>second step</strong> implementation I call <code>CATransaction.begin()</code> at the beginning.
  Inside <code>begin/commit</code> calls to <code>CATransaction</code> I create and add 2 <code>CABasicAnimations</code> to 2 different layers: one for changing the opacity from 0 to 1 (for <code>UIView</code>), and one for changing the opacity from 1 to 0 (for <code>UIImageView</code>). Both animations have <code>beginTime</code> set to <code>CACurrentMediaTime() + durationOfThePreviousStep</code>.</p>
  
  <p>And right after <code>CATransaction.begin()</code> I call <code>CATransaction.setCompletionBlock({...})</code>, and in this completion block I apply changes to these two views: set their new alphas and remove <code>UIImageView</code> from superview.</p>
  
  <p>The problem is, at the end of this whole animation the <code>UIView</code> that has alpha animated to 1 flashes, which means its alpha sets back to 0 (though I've set its alpha to 1 in the completion block) and right after this the completion block executes and its alpha goes up to 1 again.</p>
  
  <p>Well, the question is, how to get rid of this flashing? Maybe this animation can be done in better way?</p>
  
  <p>P.S. I'm not using <code>UIView</code> animations because I'm interested in custom timing functions for these animations. </p>
  
  <p><strong>EDIT 1</strong>:
  Here's the code. I've deleted <code>UIImageView</code> alpha animation because it's not really necessary.</p>
  
  <pre><code>var totalDuration: CFTimeInterval = 0.0
  
  // Alpha animations.
  let alphaAnimation = CABasicAnimation()
  alphaAnimation.keyPath = "opacity"
  alphaAnimation.fromValue = 1
  alphaAnimation.toValue = 0
  alphaAnimation.beginTime = CACurrentMediaTime()
  alphaAnimation.duration = 0.15
  
  let alphaAnimationName = "viewsFadeOut"
  view1.layer.addAnimation(alphaAnimation, forKey: alphaAnimationName)
  view1.alpha = 0
  
  view2.layer.addAnimation(alphaAnimation, forKey: alphaAnimationName)
  view2.alpha = 0
  
  view3.layer.addAnimation(alphaAnimation, forKey: alphaAnimationName)
  view3.alpha = 0
  
  view4.layer.addAnimation(alphaAnimation, forKey: alphaAnimationName)
  view4.alpha = 0
  
  // Image View moving animation.
  // Add to total duration.
  let rect = /* getting rect */
  let newImagePosition = view.convertPoint(CGPoint(x: CGRectGetMidX(rect), y: CGRectGetMidY(rect)), fromView: timeView)
  
  let imageAnimation = CABasicAnimation()
  imageAnimation.keyPath = "position"
  imageAnimation.fromValue = NSValue(CGPoint: imageView!.layer.position)
  imageAnimation.toValue = NSValue(CGPoint: newImagePosition)
  imageAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionDefault)
  imageAnimation.beginTime = CACurrentMediaTime()
  imageAnimation.duration = 0.3
  
  imageView!.layer.addAnimation(imageAnimation, forKey: "moveImage")
  imageView!.center = newImagePosition
  
  totalDuration += imageAnimation.duration
  
  // Time View alpha.
  CATransaction.begin()
  CATransaction.setCompletionBlock {
      self.timeView.alpha = 1
      self.imageView!.removeFromSuperview()
      self.imageView = nil
  }
  
  let beginTime = CACurrentMediaTime() + totalDuration
  let duration = 0.3
  
  alphaAnimation.fromValue = 0
  alphaAnimation.toValue = 1
  alphaAnimation.beginTime = beginTime
  alphaAnimation.duration = duration
  timeView.layer.addAnimation(alphaAnimation, forKey: "timeViewFadeIn")
  
  /* imageView alpha animation is not necessary, so I removed it */
  
  CATransaction.commit()
  </code></pre>
  
  <p><strong>EDIT 2</strong>: Piece of code that cause the problem:</p>
  
  <pre><code>CATransaction.begin()
  CATransaction.setCompletionBlock {
      self.timeView.alpha = 1
  }
  
  let duration = 0.3
  
  let alphaAnimation = CABasicAnimation()
  alphaAnimation.keyPath = "opacity"
  alphaAnimation.fromValue = 0.0
  alphaAnimation.toValue = 1.0
  alphaAnimation.duration = duration
  timeView.layer.addAnimation(alphaAnimation, forKey: "timeViewFadeIn")
  
  CATransaction.commit()
  </code></pre>
  
  <p>Maybe the problem is because the <code>timeView</code> has a <code>UITextField</code> and a <code>UIScrollView</code> with 4 subviews. I've tried to replace <code>timeView</code> with a snapshot of <code>timeView</code> (<code>UIImageView</code>), but that didn't help.</p>
  
  <p><strong>EDIT 3</strong>: 
  New code. With this code, <code>timeView</code> always has <code>alpha = 1</code>, and it also animates from 0 to 1.</p>
  
  <pre><code>CATransaction.begin()
  CATransaction.setCompletionBlock {
      self.imageView!.removeFromSuperview()
      self.imageView = nil
  }
  
  let alphaAnimation = CABasicAnimation()
  alphaAnimation.keyPath = "opacity"
  alphaAnimation.fromValue = 0.0
  alphaAnimation.toValue = 1.0
  alphaAnimation.duration = 0.3
  alphaAnimation.beginTime = beginTime
  
  timeView.layer.addAnimation(alphaAnimation, forKey: "timeViewFadeIn")
  timeView.alpha = 1.0
  CATransaction.commit()
  </code></pre>