Opacity Animation in SwiftUI

DevTechie Inc

Jun 24, 2022

Showing and hiding elements on screen is a common use case and SwiftUI makes it very easy to build this experience.

Here is what we are building in this article:

Let’s put together the UI first and then we will add opacity animation.

struct OpacityAnimation: View {
    
    var body: some View {
        VStack {
            Group {
                Text("iOS Development")
                    .bold()
                    .padding()
                    .background(.orange.opacity(0.2), in: Capsule())
                
                Text("Videos")
                    .bold()
                    .padding()
                    .background(.orange.opacity(0.2), in: Capsule())
            }
            
            Text("DevTechie")
                .font(.largeTitle)
                .bold()
                .foregroundColor(.white)
            .frame(width: 200, height: 200)
            .background(Color.orange, in: RoundedRectangle(cornerRadius: 20))
            
            Group {
                Text("App Development")
                    .bold()
                    .padding()
                    .background(.orange.opacity(0.2), in: Capsule())
                
                Text("Bootcamp")
                    .bold()
                    .padding()
                    .background(.orange.opacity(0.2), in: Capsule())
            }
        }
    }
}

Next, we will add State variable to toggle opacity animation and will also add a tap gesture on view so when tapped, we can show/hide subviews.

struct OpacityAnimation: View {
    @State private var animate = false
    
    var body: some View {
        VStack {
            Group {
                Text("iOS Development")
                    .bold()
                    .padding()
                    .background(.orange.opacity(0.2), in: Capsule())
                
                Text("Videos")
                    .bold()
                    .padding()
                    .background(.orange.opacity(0.2), in: Capsule())
            }
            .opacity(animate ? 1.0 : 0.0)
            
            Text("DevTechie")
                .font(.largeTitle)
                .bold()
                .foregroundColor(.white)
            .frame(width: 200, height: 200)
            .background(Color.orange, in: RoundedRectangle(cornerRadius: 20))
            
            Group {
                Text("App Development")
                    .bold()
                    .padding()
                    .background(.orange.opacity(0.2), in: Capsule())
                
                Text("Bootcamp")
                    .bold()
                    .padding()
                    .background(.orange.opacity(0.2), in: Capsule())
            }
            .opacity(animate ? 1.0 : 0.0)
        }
        .onTapGesture {
            withAnimation(Animation.spring().speed(0.2)) {
                animate.toggle()
            }
        }
    }
}

With that we have reached the end of this article. Thank you once again for reading. Subscribe to our weekly newsletter at https://www.devtechie.com