SwiftUI opacity animation fails in Gesture's onEnded method

Question

Created Jan ’22

Replies 1

Boosts 0

Views 2.8k

Participants 3

As shown in the gif below, the second tap on the purple rectangle does not trigger the animation for the blue rectangle to fade in. Is this a Bug or an obscure Feature?

Thanks for your kind reply!

trying to toggle the opacity of the big blue rectangle with animation: https://i.stack.imgur.com/teMq3.gif

struct FadeTestView: View {
 @State var fade: Bool = false
 var body: some View {
  VStack{
   Rectangle().fill(.blue).frame(width: 100, height: 100, alignment: .center)
    .opacity(fade ? 0 : 1)
    
   Button(action: {
    withAnimation(.easeInOut(duration: 2)){ fade.toggle() }
   }){
    Circle().fill(.yellow).frame(width: 50, height: 50, alignment: .center)
   }
    
   Rectangle().fill(.purple).frame(width: 50, height: 50, alignment: .center)
    .gesture(TapGesture().onEnded{
     withAnimation(.easeInOut(duration: 2)){ fade.toggle() }
    })
  }
 }
}

Boost

Answer 1

robnotyou OP

Jan ’22

Interestingly, if I add another modifier to the first Rectangle, the fade-in works!

Rectangle()
    .fill( fade ? .red : .blue)
    .frame(width: 100, height: 100, alignment: .center)
    .opacity(fade ? 0 : 1)

SwiftUI can only animate viewModifiers for Views that are already on-screen.
I think what is happening is that when the opacity is set to 0, SwiftUI removes that view from the screen...
...so it's re-appearance (on setting opacity to 1) is not animated.

As a test, try fading out, but not right to 0:

.opacity(fade ? 0.1 : 1)

This seems to work.

0