Flipper animation sample

Author: TahaTesser

SwiftUIPlayground.xcodeproj/project.xcworkspace/xcuserdata/tahatesser.xcuserdatad/UserInterfaceState.xcuserstate

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Joker.jpg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SwiftUIPlayground/Assets.xcassets/Joker.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Red_Deck.jpg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SwiftUIPlayground/Assets.xcassets/Joker.imageset/Joker.jpg

@@ -179,12 +179,13 @@ public let samples: [String: AnyView] = [
         title: "View", samples:
         [
             "Color Brightess": AnyView(ColorBrightnessSample()),
+            "Flipper Animation": AnyView(FlipperAnimationSample()),
         ]
     )),
     "NumbersDataBasicValues": AnyView(SamplesList(
         title: "NumbersDataBasicValues", samples:
         [
             "NumberFormatter": AnyView(NumberFormatterSample()),
         ]
-    ))
+    )),
 ]

SwiftUIPlayground/Assets.xcassets/Red_Deck.imageset/Contents.json

@@ -13,7 +13,7 @@ struct NumberFormatterSample: View {
             .font(.system(size: 80, weight: .bold))
             .padding()
     }
-    
+
     private func formatNumberAsWords(_ number: Int) -> String {
         let numberFormatter = NumberFormatter()
         numberFormatter.numberStyle = .spellOut

SwiftUIPlayground/Assets.xcassets/Red_Deck.imageset/Red_Deck.jpg

@@ -0,0 +1,41 @@
+//
+//  FlipperAnimationSample.swift
+//  SwiftUIPlayground
+//
+//  Created by Taha Tesser on 05.01.2025.
+//
+
+import SwiftUI
+
+struct FlipperAnimationSample: View {
+    @State private var timer: Timer?
+    @State private var flipped: Bool = false
+
+    var body: some View {
+        ZStack {
+            Image(.joker)
+                .rotation3DEffect(.degrees(flipped ? -180 : 0), axis: (x: 1.0, y: 0.0, z: 0.0))
+                .opacity(flipped ? 0 : 1)
+
+            Image(.redDeck)
+                .rotation3DEffect(.degrees(flipped ? 0 : 180), axis: (x: 1.0, y: 0.0, z: 0.0))
+                .opacity(flipped ? 1 : 0)
+        }
+        .onAppear {
+            timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
+
+                withAnimation(.spring(response: 0.6, dampingFraction: 0.7, blendDuration: 0.2)) {
+                    flipped.toggle()
+                }
+            }
+        }
+        .onDisappear {
+            timer?.invalidate()
+            timer = nil
+        }
+    }
+}
+
+#Preview {
+    FlipperAnimationSample()
+}