title: Trying to animate a drop from a faucet with CALayers
body: <p>I'm trying to make a UIView subclass that shows a water faucet with a drop that keeps growing and then dropping. The more experiments I run with the different parts, the more I get confused.</p>
  
  <p>I created two graphics:</p>
  
  <p><a href="https://i.stack.imgur.com/qhuRj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qhuRj.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/T75hi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T75hi.png" alt="enter image description here"></a></p>
  
  <p>I created a UIView class:</p>
  
  <pre><code>class ValvebeatView: UIView {
      var faucet = CALayer()
      var drip = CALayer()
  
      func _init() {
          self.faucet.contents = #imageLiteral(resourceName: "faucet").cgImage
          self.drip.contents = #imageLiteral(resourceName: "droplet").cgImage
          self.layer.insertSublayer(self.drip, above: nil)
          self.layer.insertSublayer(self.faucet, above: self.drip)
      }
  
      override init(frame: CGRect) {
          super.init(frame: frame)
          self._init()
      }
  
      required init(coder aDecoder: NSCoder) {
          super.init(coder: aDecoder)!
          self._init()
      }
  
      override func layoutSubviews() {
          super.layoutSubviews()
          self.faucet.frame = self.bounds
          self.drip.frame = self.bounds
      }
  
      func startDrop() {
  
      }
  }
  </code></pre>
  
  <p>If I add this view in my app, I get something that looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/uG9JD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uG9JD.png" alt="enter image description here"></a></p>
  
  <p>which is just right. But as soon as I try to experiment with changing the appearance of the drop, nothing works as expected. What I've tried/learned so far:</p>
  
  <ul>
  <li>Setting the <code>drip.contentScale</code> doesn't seem to do anything. The documentation makes it sound like that's just a hint anyway?</li>
  <li>I played with <code>contentsRect</code> which seems to change it, but after reading the docs, it seems to indicate that it's determine the subsection of the drop image that is shown. I want to show all of the drop, I just want to start small, make it swell, and then switch to translating it downwards.</li>
  <li>Various transform options (scale then translate) seem like the right way to do things. But that doesn't produce the right result either. For example, if I set up a tap gesture to <code>self.valvebeatView.drip.transform = CATransform3DMakeScale(0.1, 0.1, 1)</code>, it temporarily swells 10x, and then reverts to original size. But what's even weirder, is if I instead do <code>self.valvebeatView.drip.transform = CATransform3DMakeScale(10.0, 10.0, 1)</code>, it does the same thing?!?!? Why didn't it at least shrink and then revert to the original shape?</li>
  </ul>
  
  <p>I've wondered if it is because my gravity is set to the default (which is resize). But when I change that to center, the original drop is way out of size.</p>
  
  <p>The short of my question, is which hooks (transform, position, etc?) do I want to use animate my drop growing from a small scale to normal, and then falling downwards.</p>