Opacity Animation in SwiftUI
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