title: Animating between two bezier path shapes
body: <p>I found it tricky to animate a <code>UIImageView</code> between two states: its original rectangle frame, and a new shape created with a <code>UIBezierPath</code>. There are many different techniques mentioned, most of which did not work for me.</p>
  
  <p>First was the realization that using UIView block animation would not work; evidently one can't perform sublayer animations in an <code>animateWithDuration:</code> block. (see <a href="http://khanlou.com/2012/10/mixing-uiview-and-calayer-animations/" rel="nofollow noreferrer">here</a> and <a href="https://stackoverflow.com/a/9487063/383919">here</a>)</p>
  
  <p>That left <code>CAAnimation</code>, with the concrete subclasses like <code>CABasicAnimation</code>. I soon realized that one can't animate from a view that doesn't have a <code>CAShapeLayer</code> to one that does (see <a href="https://stackoverflow.com/questions/11463438/cabasicanimation-with-calayer-path-doesnt-animate">here</a>, for example).</p>
  
  <p>And they can't be just any two shape layer paths, but rather "Animating the path of a shape layer is only guaranteed to work when you are animating from like to like" (see <a href="https://stackoverflow.com/a/9522806/383919">here</a>)</p>
  
  <p>With that in place, comes the more mundane problems, like what to use for <code>fromValue</code> and <code>toValue</code> (should they be a <code>CAShapeLayer</code>, or a <code>CGPath</code>?), what to add the animation to (the <code>layer</code>, or the <code>mask</code>?), etc.</p>
  
  <p>It seemed there were so many variables; which combination would give me the animation I was looking for?</p>