When Live Activity updates data, the picture will fade in and fade out, how to turn off this animation effect?

Question

Animate content updates

When you define the user interface of your Live Activity, the system ignores any animation modifiers — for example, withAnimation(_:_:) and animation(_:value:) — and uses the system’s animation timing instead. However, the system performs some animation when the dynamic content of the Live Activity changes. Text views animate content changes with blurred content transitions, and the system animates content transitions for images and SF Symbols. If you add or remove views from the user interface based on content or state changes, views fade in and out. Use the following view transitions to configure these built-in transitions: opacity, move(edge:), slide, push(from:), or combinations of them. Additionally, request animations for timer text with numericText(countsDown:).

When Live Activity updates data, the picture will fade in and fade out, how to turn off this animation effect?

I tried all possible ways to turn off the animation, but when refreshing the Live Activity, the picture still has a semi-transparent animation.

Answer 1

Based on apple's developer documentation for ActivityKit, You cannot change the default animation for Live Activities. The system ignores any animation modifiers that you specify and uses its own animation timing instead. However, you can configure the built-in transitions for adding and removing views, and for timer text.

To achieve no effect, you can use multiple views that pop in and out based on the content state.

if !context.state.imageName.isEmpty {
  Image(systemName: context.state.imageName)
    .resizable()
    .frame(width: 30, height: 30)
    .padding(.trailing, 10)
} else {
  Image("live-activity-logo")
    .resizable()
    .frame(width: 30, height: 30)
    .padding(.trailing, 10)
}

You can use the transition modifier for these views to appear in an animated way as described in the documentation.

Answer 2

This is a tricky issue, in the sense that my experience is that different View types require different solutions.

• I have a ProgressView on my Live Activity DynamicIsland view, for which I had to use the .transition(.identity) modifier to stop the progress bar from the flashing animation. Note: .contentTransition(.identity) did not work for this view.

• I also have several Image views on my Live Activity's DynamicIsland view, for which I had to use a different solution.

This is my Image code simplified:

let url: URL? = <some URL>

if let url, 
   let uiImage = UIImage(contentsOfFile: url) 
{
    Image(uiImage: uiImage)
        .contentTransition(.identity)
}

I have tried several other methods to stop the Image from flashing, with different results:

• .transition(.identity): no effect.
• wrapping the Image in a View struct that also conforms to Equatable and marking this wrapper view with the .equatable() modifier: the flashing got greatly reduced, but still happened sporadically.
• .contentTransition(.identity): worked, the Image completely stopped flashing.