title: Anchor point in SwiftUI
body: <p>I'm playing with <code>SwiftUI</code> animations. I wanted to make a square bigger modifying its frame with an animation this way:</p>
  
  <pre><code>struct ContentView: View {
      let squareWidth = CGFloat(100)
      let squareHeight = CGFloat(100)
  
      @State private var bigger = false
  
      var body: some View {
          VStack {
              Color.green
                  .frame(width: bigger ? self.squareWidth * 2 : self.squareWidth, height: self.squareHeight)
                  .animation(.default)
              Button(action: {
                      self.bigger.toggle()
              }) {
                  Text("Click me!")
              }
          }
      }
  }
  </code></pre>
  
  <p>The animation happens from the centre of the View, that is the anchor point (0.5, 0.5). Is there a way to change this anchor point? I found out that I can use <code>scaleEffect</code> on the view specifying an <code>anchor</code>:</p>
  
  <pre><code>struct ContentView: View {
      let squareWidth = CGFloat(100)
      let squareHeight = CGFloat(100)
  
      @State private var bigger = false
  
      var body: some View {
          VStack {
              Color.green
                  .frame(width: self.squareWidth, height: self.squareHeight)
                  .scaleEffect(x: bigger ? 2 : 1, y: 1, anchor: .leading)
                  .animation(.default)
              Button(action: {
                      self.bigger.toggle()
              }) {
                  Text("Click me!")
              }
          }
      }
  }
  </code></pre>
  
  <p>But it doesn't seem exactly the same. If I needed to apply several effects I should specify the anchor point for each of them, instead of specifying the anchor point on the view just one time. On <code>UIKit</code> I could write:</p>
  
  <pre><code>var myView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
  myView.layer.anchorPoint = CGPoint(x: 0, y: 0.5) //that is, the .leading of SwiftUI
  </code></pre>