Animation is flickering in few iPhone devices

Question

The animation is working fine for most users but it's flickering for a few. This is how it's flickering and how it should idly look:

Here's the code:

   ZStack {
            
            Circle()
                .fill(Color.white.opacity(0.6))
                .frame(width: state == .paused ? 0 : width() / 2, height: state == .paused ? 0 : width() / 2)
                .animation(.default, value: state)
            
            if state == .notStarted {
                (Text(viewModel.book.currentPositionText()) + Text(": \(viewModel.book.toProgressText(progress: Float(viewModel.book.currentPositionValue())))"))
                    .largeWhiteHeading()
                    .padding(.top, width()/2 + 88)
            }
            
            Circle()
                .stroke(Color.white, lineWidth: 2)
                .frame(width: viewModel.timerOnAnimState ? width() - 32 : width() / 2, height: viewModel.timerOnAnimState ? width() - 32 : width() / 2)
                .opacity(viewModel.timerOnAnimState ? 0 : 0.6)
                .animation(viewModel.timerOnAnimState ? rippleAnimation : .default, value: viewModel.timerOnAnimState)
            
            Circle()
                .stroke(Color.white, lineWidth: 2)
                .frame(width: viewModel.timerOnAnimState ? width() - 32 : width() / 2, height: viewModel.timerOnAnimState ? width() - 32 : width() / 2)
                .opacity(viewModel.timerOnAnimState ? 0 : 0.6)
                .animation(viewModel.timerOnAnimState ? rippleAnimation.delay(2.0) : .default, value: viewModel.timerOnAnimState)
            
            Text(viewModel.time)
                .onReceive(viewModel.timer, perform: { _ in
                    if viewModel.sessionState == .inProgress {
                        viewModel.updateTime()
                    }
                })
                .foregroundColor(Color.primaryText)
                .font(.custom(RMFont.Pacifico_Regular, size: 48))
        }
        .opacity(state == .paused ? 0 : 1)
        .animation(.default, value: state)

Any help would be appreciated.

Benzy Neez · Answer 1 · 2023-08-01T13:38:32.123

There is quite a lot missing from the snippet you provided, so it is not possible to reproduce a working version. In particular, the following are missing and are difficult to guess: the underlying view model, the function width(), the animation rippleAnimation, the modifier .largeWhiteHeading.

The gifs also feature buttons (Start, Pause, Stop) which don't appear in your code either, so there must be more layers to the view that you have not provided.

The problem seems to happen just as the timer is started, at which point the text block (the one that is included in your snippet) should disappear. Maybe this transition is not working as you expected.

In any case, here are some suggestions for finding the cause of the problem:

Try applying .transition(.identity) to the text block that disappears when the timer is started.
Try slowing down animations: when running in an Xcode simulator, select Debug > Slow Animations from the simulator menu bar.
Try replacing rippleAnimation with a standard animation effect, to see if this could be the cause.
Try commenting out successive layers of the view until you can identify the exact layer that is causing the issue.
Check for an edge condition when the timer is started but no time has elapsed (the time delivered by the viewModel is 0).

My guess is that it is not the circles causing the issue, but rather one of the text or button blocks.

Animation is flickering in few iPhone devices

1 Answers1