added card animations and onTaps

p5150j · Jul 8, 2021 · d185956 · d185956
1 parent 662ea1d
commit d185956
Showing 1 changed file with 20 additions and 11 deletions.
diff --git a/DesignCode/ContentView.swift b/DesignCode/ContentView.swift
@@ -6,37 +6,46 @@
 //
 
 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)
 
             BackCardView()
-                .background(Color("card4"))
+                .background(show ? Color("card3") : Color("card4"))
                 .cornerRadius(20)
                 .shadow(radius: 20)
-                .offset(x: 0, y: -40)
+                .offset(x: 0, y: show ? -400 : -40)
                 .scaleEffect(0.9)
-                .rotationEffect(Angle(degrees: 10))
+                .rotationEffect(Angle.degrees(show ? 0 : 10))
                 .rotation3DEffect(Angle(degrees: 10), axis: (x: 10.0, y: 0, z: 0))
                 .blendMode(.hardLight)
+                .animation(.easeInOut(duration: 0.5))
 
             BackCardView()
-                .background(Color("card3"))
+                .background(show ? Color("card4") : Color("card3"))
                 .cornerRadius(20)
                 .shadow(radius: 20)
-                .offset(x: 0, y: -20)
+                .offset(x: 0, y: show ? -200 : -20)
                 .scaleEffect(0.95)
-                .rotationEffect(Angle(degrees: 5))
+                .rotationEffect(Angle.degrees(show ? 0 : 5))
                 .rotation3DEffect(Angle(degrees: 5), axis: (x: 10.0, y: 0, z: 0))
                 .blendMode(.hardLight)
+                .animation(.easeInOut(duration: 0.3))
             CardView()
                 .blendMode(.hardLight)
+                .onTapGesture {
+                    self.show.toggle()
+                }
 
             BottomCardView()
-                .blur(radius: 20)
+                .blur(radius: show ? 20 : 0)
+                .animation(.default)
 
         }
     }
@@ -110,8 +119,8 @@ struct BottomCardView: View {
     var body: some View {
         VStack(spacing: 20) {
             Rectangle()
-                .frame(width: 40, height: 5, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
-                .cornerRadius(/*@START_MENU_TOKEN@*/3.0/*@END_MENU_TOKEN@*/)
+                .frame(width: 40, height: 5, alignment: .center)
+                .cornerRadius(3.0)
                 .opacity(0.1)
             Text("Bacon ipsum dolor amet shankle biltong chislic ball tip beef kielbasa, cupim buffalo beef ribs ham rump. Bresaola picanha sausage, pork fatback beef ribs shankle.")
                 .multilineTextAlignment(.center)