Merge pull request twostraws#24 from twodayslate/genie

Add Genie/Suck Transition Effect

Author: twostraws

LICENSE

@@ -66,4 +66,11 @@ Wind
 Based on: https://gl-transitions.com/editor/wind
 Original author: gre
 Metal port: Paul Hudson
+License: MIT
+
+Genie
+---
+Based on: https://www.shadertoy.com/view/flyfRt
+Original author: altaha-ansari
+Metal port: twodayslate
 License: MIT

README.md

@@ -1464,6 +1464,53 @@ struct ContentView: View {
 }
 ```
 
+</details>
+
+### Genie
+<details>
+<summary> Details (Click to expand) </summary>
+
+A transition that makes it look like the view is getting sucked into a corner.
+
+**Parameters:**
+
+- None.
+
+Example code:
+
+```swift
+struct ContentView: View {
+    @State private var showingFirstView = true
+
+    var body: some View {
+        VStack {
+            if showingFirstView {
+                Image(systemName: "figure.walk.circle")
+                    .font(.system(size: 300))
+                    .foregroundStyle(.white)
+                    .padding()
+                    .background(.blue)
+                    .drawingGroup()
+                    .transition(.genie())
+            } else {
+                Image(systemName: "figure.run.circle")
+                    .font(.system(size: 300))
+                    .foregroundStyle(.white)
+                    .padding()
+                    .background(.indigo)
+                    .drawingGroup()
+                    .transition(.genie())
+            }
+
+            Button("Toggle Views") {
+                withAnimation(.easeIn(duration: 1.5)) {
+                    showingFirstView.toggle()
+                }
+            }
+        }
+    }
+}
+```
 </details>
 </details>
 
@@ -1508,6 +1555,7 @@ Some shaders were ported to Metal by me, from other open-source samples also rel
 - Radial is based on [Radial](https://gl-transitions.com/editor/Radial) by Xaychru / gre.
 - Swirl is based on [Swirl](https://gl-transitions.com/editor/Swirl) by Sergey Kosarevsky / gre.
 - Wind is based on [Wind](https://gl-transitions.com/editor/wind) by gre.
+- Genie is based on [Mac Genie Effecty](https://www.shadertoy.com/view/flyfRt) by altaha-ansari.
 
 ## Where to learn more
 

Sandbox/Inferno/ShaderDescriptions/TransitionShader.swift

@@ -49,5 +49,6 @@ struct TransitionShader: Hashable, Identifiable {
         TransitionShader(name: "Radial", transition: .radial),
         TransitionShader(name: "Swirl", transition: .swirl(radius: 0.5)),
         TransitionShader(name: "Wind", transition: .wind(size: 0.1)),
+        TransitionShader(name: "Genie", transition: .genie()),
     ]
 }

Sources/Inferno/Shaders/Transition/Genie.metal

@@ -0,0 +1,47 @@
+//
+//  Genie.metal
+//  Inferno
+//
+//  Created by Zachary Gorak on 12/2/23.
+//
+
+#include <metal_stdlib>
+#include <SwiftUI/SwiftUI_Metal.h>
+using namespace metal;
+
+float2 remap(float2 uv, float2 inputLow, float2 inputHigh, float2 outputLow, float2 outputHigh){
+    float2 t = (uv - inputLow)/(inputHigh - inputLow);
+    float2 final = mix(outputLow,outputHigh,t);
+    return final;
+}
+
+[[ stitchable ]] float2 genieTranstion(float2 position, float2 size, float effectValue) {
+    // Normalized pixel coordinates (from 0 to 1)
+    float2 normalizedPosition = position / size;
+    float positiveEffect = effectValue*sign(effectValue);
+    float progress = abs(sin(positiveEffect * M_PI_2_F));
+
+    float bias = pow((sin(normalizedPosition.y * M_PI_F) * 0.1), 0.9);
+
+    // right side
+    float BOTTOM_POS = size.x;
+    // width of the mini frame
+    float BOTTOM_THICKNESS = 0.1;
+    // height of the min frame
+    float MINI_FRAME_THICKNESS = 0.0;
+    // top right
+    float2 MINI_FRAME_POS = float2(size.x, 0.0);
+
+    float min_x_curve = mix((BOTTOM_POS-BOTTOM_THICKNESS/2.0)+bias, 0.0, normalizedPosition.y);
+    float max_x_curve = mix((BOTTOM_POS+BOTTOM_THICKNESS/2.0)-bias, 1.0, normalizedPosition.y);
+    float min_x = mix(min_x_curve, MINI_FRAME_POS.x, progress);
+    float max_x = mix(max_x_curve, MINI_FRAME_POS.x+MINI_FRAME_THICKNESS, progress);
+
+    float min_y = mix(0.0, MINI_FRAME_POS.y, progress);
+    float max_y = mix(1.0, MINI_FRAME_POS.y+MINI_FRAME_THICKNESS, progress);
+
+    float2 modUV = remap(position, float2(min_x, min_y), float2(max_x, max_y), float2(0.0), float2(1.0));
+
+    return position + modUV * progress;
+
+}

Sources/Inferno/SwiftUI/Transitions.swift

@@ -129,6 +129,30 @@ struct InfernoTransition: ViewModifier {
     }
 }
 
+/// A Metal-powered distortion effect transition that needs to know
+/// the view's size. You probably don't want to use this directly, and
+/// should instead use one of the AnyTranstion extensions.
+@available(iOS 17, macOS 14, macCatalyst 17, tvOS 17, visionOS 1, *)
+struct InferoDistortionTranstion: ViewModifier {
+    /// The name of the shader function we're rendering.
+    var name: String
+
+    /// How far we are through the transition: 0 is unstarted, and 1 is finished.
+    var progress = 0.0
+
+    func body(content: Content) -> some View {
+        content
+            .visualEffect { content, proxy in
+                content
+                    .distortionEffect(
+                        InfernoShaderLibrary[dynamicMember: name](
+                            .float2(proxy.size),
+                            .float(progress)
+                        ), maxSampleOffset: .zero)
+            }
+    }
+}
+
 /// A transition that causes the incoming and outgoing views to become
 /// increasingly pixellated, then return to their normal state. While this
 /// happens the old view fades out and the new one fades in.
@@ -309,6 +333,21 @@ extension AnyTransition {
         )
     }
 
+    /// A transition that causes the incoming and outgoing views to become
+    /// sucked in and ouf of the top right corner.
+    public static func genie() -> AnyTransition {
+        .asymmetric(
+            insertion: .modifier(
+                active: InferoDistortionTranstion(name: "genieTranstion", progress: 1),
+                identity:  InferoDistortionTranstion(name: "genieTranstion", progress: 0)
+            ),
+            removal: .modifier(
+                active:  InferoDistortionTranstion(name: "genieTranstion", progress: 1),
+                identity:  InferoDistortionTranstion(name: "genieTranstion", progress: 0)
+            )
+        )
+    }
+
     /// A transition that creates an old-school radial wipe, starting from straight up.
     public static let radial: AnyTransition = .asymmetric(
         insertion: .modifier(