Add cards

2026-01-17 22:46:42 +01:00 · 2019-06-26 09:20:23 +03:00
parent c1ea01d8af
commit 315cd7c8a8
1 changed files with 122 additions and 0 deletions
--- a/Files/AnimatableCards.swift
+++ b/Files/AnimatableCards.swift
@@ -0,0 +1,122 @@
+// The MIT License (MIT)
+// Copyright © 2019 Ivan Vorobei (hello@ivanvorobei.by)
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import SwiftUI
+
+struct ContentView: View {
+    
+    @GestureState var dragState = DragState.inactive
+    
+    var body: some View {
+        
+        let dragGester = DragGesture()
+            .updating($dragState) { (value, state, transaction) in
+                state = .dragging(translation: value.translation)
+        }
+        
+        return ZStack {
+            Card(title: "Third card")
+                .rotation3DEffect(Angle(degrees: dragState.isActive ? 0 : 60), axis: (x: 10.0, y: 10.0, z: 10.0))
+                .blendMode(.hardLight)
+                .padding(dragState.isActive ?  32 : 64)
+                .padding(.bottom, dragState.isActive ? 32 : 64)
+                .animation(.spring())
+            Card(title: "Second Card")
+                .rotation3DEffect(Angle(degrees: dragState.isActive ? 0 : 30), axis: (x: 10.0, y: 10.0, z: 10.0))
+                .blendMode(.hardLight)
+                .padding(dragState.isActive ?  16 : 32)
+                .padding(.bottom, dragState.isActive ? 0 : 32)
+                .animation(.spring())
+            MainCard(title: "Main Card")
+                .offset(
+                    x: dragState.translation.width,
+                    y: dragState.translation.height
+                )
+                .rotationEffect(Angle(degrees: Double(dragState.translation.width / 10)))
+                .shadow(radius: dragState.isActive ? 8 : 0)
+                .animation(.spring())
+                .gesture(dragGester)
+        }
+        
+    }
+    
+    enum DragState {
+        
+        case inactive
+        case dragging(translation: CGSize)
+        
+        var translation: CGSize {
+            switch self {
+            case .inactive:
+                return .zero
+            case .dragging(let translation):
+                return translation
+            }
+        }
+        
+        var isActive: Bool {
+            switch self {
+            case .inactive:
+                return false
+            case .dragging:
+                return true
+            }
+        }
+    }
+}
+
+struct Card: View {
+    
+    var title: String
+    
+    var body: some View {
+        ZStack {
+            Rectangle()
+                .fill(Color(red: 68 / 255, green: 41 / 255, blue: 182 / 255))
+                .frame(height: 230)
+                .cornerRadius(10)
+                .padding(16)
+            Text(title)
+                .color(.white)
+                .font(.title)
+                .bold()
+        }
+    }
+}
+
+struct MainCard: View {
+    
+    var title: String
+    
+    var body: some View {
+        ZStack {
+            Rectangle()
+                .fill(Color.black)
+                .frame(height: 230)
+                .cornerRadius(10)
+                .padding(16)
+            Text(title)
+                .color(.white)
+                .font(.largeTitle)
+                .bold()
+        }
+    }
+}