CODEWITHSUNDEEP
animationswiftuitextopacityios17
BlackWolf
BlackWolf

Reputation: 5629

SwiftUI + iOS17 – Text animation issues with opacity applied

I am currently investigating an animation issue on iOS17 and discovered some behaviour different compared to iOS16 that I'm trying to understand. I've debugged this down to the fact that iOS17 behaves differently when certain modifiers are applied to a Text, such as .opacity or .blur, and then a text change is animated.

Text without .opacity

@State var text = "Start"
    
var body: some View {
    Text(text)
        .animation(.linear(duration: 1.0), value: text)
        .background(Color.red)
        .onAppear {
            text = "Text after animation"
        }
}

Result

The result:

enter image description here

Text with .opacity

Now consider the same code, but with an opacity modifier applied:

@State var text = "Start"
    
var body: some View {
    Text(text)
        .opacity(0.5)
        .animation(.linear(duration: 1.0), value: text)
        .background(Color.red)
        .onAppear {
            text = "Text after animation"
        }
}

Result

The result on iOS16 is the same as above. On iOS17, however, this is the result: enter image description here

So I have two basic questions:

Upvotes: 0

Views: 461

Answers (1)

Benzy Neez
Benzy Neez

Reputation: 21730

As a workaround, you can force a change of id every time the view is repainted:

Text(text)
    .id(UUID()) // <- ADDED
    .opacity(0.5)
    .animation(.linear(duration: 5.0), value: text)
    .background(Color.red)
    .onAppear {
        text = "Text after animation"
    }

I suppose, what this gives you is a transition from the old view to the new view, rather than an animated change to an existing view.

Upvotes: 1

Related Questions