title: CAShapeLayer and UIImage
body: <p>I have been trying to learn more about using <code>CAShapeLayer</code> animating it using path. 
  The first thing came to my mind was having the effect of a "compressed" tennis ball against the edge before it bounces off. </p>
  
  <p>But rather than using the <code>fillPath</code> of the layer, I tried to set an image to this layer.
  So I created another <code>CALayer</code>, assigned to its contents property an image and animate the shape layer's path. </p>
  
  <p>But the result is that instead of the image being completely wrapped within this path, which, as I hoped, would grow and shrink as the path is being animated, the image is being revealed and cover while the path is being animated. </p>
  
  <p>I would like to be able to have this image completely wrapped by the path and as the path is being animated, regardless of shapes, the image is still wrapped within this path on the shape layer. Image distortion is not an issue here. </p>
  
  <p>What I had in mind is, for example, having a tennis ball image that I downloaded, wrapping it in <code>CAShapeLayer</code> in a upside-down teardrop-like path (see picture: <img src="https://i.stack.imgur.com/sXIYe.jpg" alt="enter image description here">) and animate from a smaller upside-down teardrop shape into a larger upside-down teardrop and eventually shows a circle (a tennis ball image).</p>
  
  <p>Is it possible to achieve this using <code>CAShapeLayer</code>? Could you please give me a sample here? Thanks in advance. </p>
  
  <p>Adding Code:</p>
  
  <p>Hi, this is what I got so far (thanks to @lnafziger)</p>
  
  <pre><code>//Setting up layer
  - (void)setupLayer
  {
      self.caShapeLayer = [CAShapeLayer layer];&lt;
      self.caLayer = (CALayer*) self.layer;
  
      self.caLayer.contents = (id)([UIImage imageNamed:"@yellowTennisBall.png"] CGImage]);
      self.caLayer.mask = self.caShapeLayer;
  }  
  
  //Animate the path of CAShapeLayer
  - (void)bounce
  { 
      CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
      animation.duration = 1.7;
      animation.repeatCount = HUGE_VAL;
      animation.timingFunction = [CAMediaTimingFunction  functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
      animation.fromValue = (__bridge id)[self defaultPath];
      animation.toValue = (__bridge id)[self compressedPath];
      animation.autoreverses = YES;
      [self.caShapeLayer addAnimation:animation forKey:@"animatePath"];
  }
  </code></pre>
  
  <p>For the aforementioned effect and wrapping UIImage within the path, I have gotten nowhere with coding... </p>