title: Choppy CATextLayer animation: fontSize + position concurrently
body: <p>I need to animate a <code>CATextLayer</code>'s <code>bounds.size.height</code>, <code>position</code>, and <code>fontSize</code>. When I add them to a <code>CAAnimationGroup</code>, the text jitters during the animation, just like this:</p>
  
  <p><a href="https://youtu.be/HfC1ZX-pbyM" rel="noreferrer">https://youtu.be/HfC1ZX-pbyM</a></p>
  
  <p>The jittering of the text's tracking values (spacing between characters) seems to occur while animating <code>fontSize</code> with <code>bounds.size.height</code> AND/OR <code>position</code>. I've isolated <code>fontSize</code>, and it performs well on its own.</p>
  
  <p>How can I prevent the text from jittering in <code>CATextLayer</code> if I animate bounds and font size at the same time?</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've moved on from animating <code>bounds</code>. Now, I only care about <code>fontSize</code> + <code>position</code>. Here are two videos showing the difference.</p>
  
  <p><code>fontSize</code> only (smooth): <a href="https://youtu.be/FDPPGF_FzLI" rel="noreferrer">https://youtu.be/FDPPGF_FzLI</a></p>
  
  <p><code>fontSize</code> + <code>position</code> (jittery): <a href="https://youtu.be/3rFTsp7wBzk" rel="noreferrer">https://youtu.be/3rFTsp7wBzk</a></p>
  
  <p>Here is the code for that.</p>
  
  <pre><code>    let startFontSize: CGFloat = 16
      let endFontSize: CGFloat = 30
  
      let startPosition: CGPoint = CGPoint(x: 40, y: 100)
      let endPosition: CGPoint = CGPoint(x: 20, y: 175)
  
      // Initialize the layer
  
      textLayer = CATextLayer()
      textLayer.string = "Hello how are you?"
      textLayer.font = UIFont.systemFont(ofSize: startFontSize, weight: UIFont.Weight.semibold)
      textLayer.fontSize = startFontSize
      textLayer.alignmentMode = kCAAlignmentLeft
      textLayer.foregroundColor = UIColor.black.cgColor
      textLayer.contentsScale = UIScreen.main.scale
      textLayer.isWrapped = true
      textLayer.backgroundColor = UIColor.lightGray.cgColor
      textLayer.anchorPoint = CGPoint(x: 0, y: 0)
      textLayer.position = startPosition
      textLayer.bounds.size = CGSize(width: 450, height: 50)
      view.layer.addSublayer(textLayer)
  
      // Animate
  
      let damping: CGFloat = 20
      let mass: CGFloat = 1.2
  
      var animations = [CASpringAnimation]()
  
      let fontSizeAnim = CASpringAnimation(keyPath: "fontSize")           
      fontSizeAnim.fromValue = startFontSize
      fontSizeAnim.toValue = endFontSize
      fontSizeAnim.damping = damping
      fontSizeAnim.mass = mass
      fontSizeAnim.duration = fontSizeAnim.settlingDuration
      animations.append(fontSizeAnim)
  
      let positionAnim = CASpringAnimation(keyPath: "position.y")
      positionAnim.fromValue = textLayer.position.y
      positionAnim.toValue = endPosition.y
      positionAnim.damping = damping
      positionAnim.mass = mass
      positionAnim.duration = positionAnim.settlingDuration
      animations.append(positionAnim)
  
      let animGroup = CAAnimationGroup()
      animGroup.animations = animations
      animGroup.duration = fontSizeAnim.settlingDuration
      animGroup.isRemovedOnCompletion = true
      animGroup.autoreverses = true
      textLayer.add(animGroup, forKey: nil)
  </code></pre>
  
  <p>My device is running iOS 11.0.</p>
  
  <hr>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>I've broken down each animation (<code>fontSize</code> only, and <code>fontSize</code> + <code>position</code>) frame-by-frame. In each video, I'm progressing 1 frame at a time. </p>
  
  <p>In the <code>fontSize</code> only video (<a href="https://youtu.be/DZw2pMjDcl8" rel="noreferrer">https://youtu.be/DZw2pMjDcl8</a>), <strong>each frame</strong> yields an increase in <code>fontSize</code>, so there's no choppiness. </p>
  
  <p>In the <code>fontSize</code> + <code>position</code> video (<a href="https://youtu.be/_idWte92F38" rel="noreferrer">https://youtu.be/_idWte92F38</a>), <strong><code>position</code> is updated in every frame, but not <code>fontSize</code></strong>. There is only an increase in <code>fontSize</code> in 60% of frames, meaning that <code>fontSize</code> isn't animating in sync with <code>position</code>, causing the perceived chopping.</p>
  
  <p>So maybe the right question is: why does <code>fontSize</code> animate in each frame when it's the only animation added to a layer, but not when added as part of <code>CAAnimationGroup</code> in conjunction with the <code>position</code> animation?</p>