CODEWITHSUNDEEP
swiftui
stefanosn
stefanosn

Reputation: 3324

Animation transition scale does not work in swiftui

I am trying to run the following transition in a View but does not work as expected. The HELLO WORLD Text should be at first visible. Then on tap of the button it should scale based on the private var zoomOutTransition. The transition is triggered but i see a second Text staying on the screen. Any help appreciated!!!

import SwiftUI

public struct SimpleAnimation: View {

        @State
    private var scaleEightImage = false
    
    
    private var zoomOutTransition: AnyTransition {
        return .asymmetric(
            insertion: .identity.animation(nil),
            removal: .scale(
                scale: 1000, anchor: UnitPoint(x: 0.494, y: 0.05))
                    .animation(
                        .easeInOut(duration: 10.0)
                        .delay(0.1)
                    )
        )
    }
    
    public var body: some View {

        ZStack {
            Color.clear
            VStack {
                Spacer()
                if scaleEightImage {
                    Text("HELLO WORLD!")
                        .foregroundColor(Color.black)
                        .transition(zoomOutTransition)
                } else if !scaleEightImage {
                    Text("HELLO WORLD!")
                        .foregroundColor(Color.black)
                }

            }
            
            VStack {
                Button {
                     DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                    withAnimation {
                        viewModel.scaleEightImage.toggle()
                    }
}
                } label: {
                    Text("tappppp me")
                        .foregroundColor(Color.black)
                }
            }
        }

}

Upvotes: 0

Views: 140

Answers (1)

HunterLion
HunterLion

Reputation: 4016

The text stays on the screen because you have 2 Text() views - one that shows when scaleEightImage is true, another one for when scaleEightImage is false.

You just need to show the text only when scaleEightImage is false:

VStack {
    Spacer()
    if !scaleEightImage {
        Text("HELLO WORLD!")
            .foregroundColor(Color.black)
            .transition(zoomOutTransition)
    }
}

Upvotes: 0

Related Questions