title: How to Animate Path in SwiftUI
body: <p>Being unfamiliar with SwiftUI and the fact that there is not much documentation on this new framework yet. I was wondering if anyone was familiar with how it would be possible to animate a <code>Path</code> in SwiftUI.</p>
  
  <p>For example given a view, lets say this simple <code>RingView</code>: </p>
  
  <pre class="lang-swift prettyprint-override"><code>struct RingView : View {   
      var body: some View {
          GeometryReader { geometry in
              Group {
                  // create outer ring path
                  Path { path in
                      path.addArc(center: center,
                                  radius: outerRadius,
                                  startAngle: Angle(degrees: 0),
                                  endAngle: Angle(degrees: 360),
                                  clockwise: true)
                  }
                  .stroke(Color.blue)
  
                  // create inner ring
                  Path { path in
                      path.addArc(center: center,
                                  radius: outerRadius,
                                  startAngle: Angle(degrees: 0),
                                  endAngle: Angle(degrees: 180),
                                  clockwise: true)
                  }
                  .stroke(Color.red)
                  .animation(.basic(duration: 2, curve: .linear))
              }
          }
          .aspectRatio(1, contentMode: .fit)
      }
  }
  </code></pre>
  
  <p>What is displayed is: </p>
  
  <p><a href="https://i.stack.imgur.com/RsX5Fl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RsX5Fl.png" alt="enter image description here"></a></p>
  
  <p>Now I was wondering how we could go about animating the inner ring, that is the red line inside the blue line. The animation I'm looking to do would be a simple animation where the path appears from the start and traverses to the end.</p>
  
  <p>This is rather simple using CoreGraphics and the old UIKit framework but it doesn't seem like adding a simple <code>.animation(.basic(duration: 2, curve: .linear))</code> to the inner path and displaying the view with a <code>withAnimation</code> block does anything. </p>
  
  <p>I've looked at the provided Apple tutorials on SwiftUI but they really only cover move/scale animations on more in-depth views such as <code>Image</code>. </p>
  
  <p>Any guidance on how to animate a <code>Path</code> or <code>Shape</code> in SwiftUI?</p>