title: Toggling Animation based on Apple Watch's Always On Scenen Phase not working as expected?
body: <p>I may be doing something wrong, but following <a href="https://developer.apple.com/documentation/watchkit/designing_your_app_for_the_always_on_state" rel="nofollow noreferrer">Apple's Docs</a> for how to pause animation to support Always On in WatchOS 8, with the code below my animation will pause correctly when the the scene phase is inactive, but when it becomes active again the animation does not resume?</p>
  <pre><code>struct PulseView: View {
      
      @Environment(\.scenePhase) private var scenePhase
      
      @State var animate = false
      
      var body: some View {
          if scenePhase == .active {
                  ZStack {
                      ZStack {
                          Circle().fill(circlesColor().opacity(0.25)).frame(width: outerCircleSize, height: outerCircleSize).scaleEffect(self.animate ? 1 : 0.01)
                          Circle().fill(circlesColor().opacity(0.35)).frame(width: middleCircleSize, height: middleCircleSize).scaleEffect(self.animate ? 1 : 0.01)
                          Circle().fill(circlesColor()).frame(width: innerCircleSize, height: innerCircleSize)
                      }
                      .onAppear { self.animate = true }
                      .animation(animate ? Animation.easeInOut(duration: 1.5).repeatForever(autoreverses: true) : .default)
                     
            } else {
                    ZStack {
                        ZStack {
                            Circle().fill(circlesColor().opacity(0.25)).frame(width: outerCircleSize, height: outerCircleSize).scaleEffect(self.animate ? 1 : 0.01)
                            Circle().fill(circlesColor().opacity(0.35)).frame(width: middleCircleSize, height: middleCircleSize).scaleEffect(self.animate ? 1 : 0.01)
                            Circle().fill(circlesColor()).frame(width: innerCircleSize, height: innerCircleSize)
                        }
                        //.onAppear { self.animate = true }
                        //.animation(animate ? Animation.easeInOut(duration: 1.5).repeatForever(autoreverses: true) : .default)
            }
       
      }
  </code></pre>