Toggling Animation based on Apple Watch's Always On Scenen Phase not working as expected?

Question

I may be doing something wrong, but following Apple's Docs 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?

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)
          }
     
    }

TimelineView has a context.cadence variable that detects this the [documentation](https://developer.apple.com/documentation/swiftui/timelineview) describes it — lorem ipsum, Dec 01 '21 at 17:42
@loremipsum thanks I can kind of follow this, but would toggle my animation off and on based on `context.cadence`? and how would be best to do that? — GarySabo, Dec 01 '21 at 18:25
It should. I don’t have my Mac now but I can work on something in a little bit. But I would just use the code in the documentation if the cadence is less than seconds don’t show animation else show it. — lorem ipsum, Dec 01 '21 at 18:40
I was actually able to get this work without needing a TimeLineView, but just adding an .OnChangeOf modifier to toggle my @State var animate off and on. — GarySabo, Dec 01 '21 at 18:49
Great make sure you post your solution as an answer. You can mark it as a solution. Your work might help someone else. — lorem ipsum, Dec 01 '21 at 19:46

score 0 · Answer 1 · answered Dec 01 '21 at 20:11

I should have realized why it wasn't working, but adding a toggle to animate using an OnChangeOf modifier solved this issue.

 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 }
                        //HERE BELOW
                        .onChange(of: scenePhase, perform: { newValue in
                          if newValue == .active {
                             self.animate = true
                          } else {
                             self.animate = false
                          }
                         })
                        .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)
              }
         
        }

Toggling Animation based on Apple Watch's Always On Scenen Phase not working as expected?

1 Answers1