Animations and States

Author: Mithun

DesignCode/ContentView.swift

@@ -9,30 +9,47 @@
 import SwiftUI
 
 struct ContentView: View {
+
+   @State var show = false
+
    var body: some View {
       ZStack {
 
          TitleView()
-            .blur(radius: 20)
+            .blur(radius: show ? 20 : 0)
+            .animation(.default)
 
          CardBottomView()
-            .blur(radius: 20)
+            .blur(radius: show ? 20 : 0)
+            .animation(.default)
 
          CardView()
-            .offset(x: 0, y: -40)
+            .background(show ? Color.red : Color("background9"))
+            .cornerRadius(10)
+            .shadow(radius: 20)
+            .offset(x: 0, y: show ? -400 : -40)
             .scaleEffect(0.85)
-            .rotationEffect(Angle(degrees: 15))
+            .rotationEffect(Angle(degrees: show ? 15 : 0))
             .blendMode(.hardLight)
+            .animation(.basic(duration: 0.7, curve: .easeInOut))
 
          CardView()
-            .offset(x: 0, y: -20)
+            .background(show ? Color.red : Color("background8"))
+            .cornerRadius(10)
+            .shadow(radius: 20)
+            .offset(x: 0, y: show ? -200 : -20)
             .scaleEffect(0.9)
-            .rotationEffect(Angle(degrees: 10))
+            .rotationEffect(Angle(degrees: show ? 10 : 0))
             .blendMode(.hardLight)
+            .animation(.basic(duration: 0.5, curve: .easeInOut))
 
          CertificateView()
             .scaleEffect(0.95)
-            .rotationEffect(Angle(degrees: 5))
+            .rotationEffect(Angle(degrees: show ? 5 : 0))
+            .animation(.spring())
+            .tapAction {
+               self.show.toggle()
+            }
       }
    }
 }
@@ -51,9 +68,6 @@ struct CardView: View {
          Text("Card Back")
       }
       .frame(width: 340.0, height: 220.0)
-      .background(Color.blue)
-      .cornerRadius(10)
-      .shadow(radius: 20)
    }
 }