Rotate3D Transition (#37)

Closes #8.

This one also includes a nice cleanup of transient view props and
unifies transforms by prioritizing 2D if possible and using 3D only if
necessary.

Author: davdroman

Demo/Demo.xcodeproj/project.pbxproj

@@ -19,6 +19,7 @@
 		D5535845290F52F7009E5D72 /* SettingsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D5535844290F52F7009E5D72 /* SettingsView.swift */; };
 		D5535847290F5E6F009E5D72 /* AppState.swift in Sources */ = {isa = PBXBuildFile; fileRef = D5535846290F5E6F009E5D72 /* AppState.swift */; };
 		D5755A79291ADC00007F2201 /* Zoom.swift in Sources */ = {isa = PBXBuildFile; fileRef = D5755A78291ADC00007F2201 /* Zoom.swift */; };
+		D58D803F292176D200D9FEAE /* Flip.swift in Sources */ = {isa = PBXBuildFile; fileRef = D58D803E292176D200D9FEAE /* Flip.swift */; };
 		D5AAF4052911C59E009743D3 /* PageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D5AAF4042911C59E009743D3 /* PageView.swift */; };
 		D5AAF4072911C621009743D3 /* Pages.swift in Sources */ = {isa = PBXBuildFile; fileRef = D5AAF4062911C621009743D3 /* Pages.swift */; };
 /* End PBXBuildFile section */
@@ -38,6 +39,7 @@
 		D5535846290F5E6F009E5D72 /* AppState.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppState.swift; sourceTree = "<group>"; };
 		D571826B291C9426003672F5 /* Demo.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = Demo.entitlements; sourceTree = "<group>"; };
 		D5755A78291ADC00007F2201 /* Zoom.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Zoom.swift; sourceTree = "<group>"; };
+		D58D803E292176D200D9FEAE /* Flip.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Flip.swift; sourceTree = "<group>"; };
 		D5AAF4042911C59E009743D3 /* PageView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PageView.swift; sourceTree = "<group>"; };
 		D5AAF4062911C621009743D3 /* Pages.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Pages.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -85,8 +87,7 @@
 				D5AAF4062911C621009743D3 /* Pages.swift */,
 				D5AAF4042911C59E009743D3 /* PageView.swift */,
 				D5535844290F52F7009E5D72 /* SettingsView.swift */,
-				D553582C290E9718009E5D72 /* Swing.swift */,
-				D5755A78291ADC00007F2201 /* Zoom.swift */,
+				D58D8040292176EE00D9FEAE /* Custom Transitions */,
 				D5535822290E9692009E5D72 /* Assets.xcassets */,
 				D5535824290E9692009E5D72 /* Preview Content */,
 			);
@@ -108,6 +109,16 @@
 			name = Frameworks;
 			sourceTree = "<group>";
 		};
+		D58D8040292176EE00D9FEAE /* Custom Transitions */ = {
+			isa = PBXGroup;
+			children = (
+				D58D803E292176D200D9FEAE /* Flip.swift */,
+				D553582C290E9718009E5D72 /* Swing.swift */,
+				D5755A78291ADC00007F2201 /* Zoom.swift */,
+			);
+			path = "Custom Transitions";
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -186,6 +197,7 @@
 				D5AAF4072911C621009743D3 /* Pages.swift in Sources */,
 				D5535845290F52F7009E5D72 /* SettingsView.swift in Sources */,
 				D5755A79291ADC00007F2201 /* Zoom.swift in Sources */,
+				D58D803F292176D200D9FEAE /* Flip.swift in Sources */,
 				D5AAF4052911C59E009743D3 /* PageView.swift in Sources */,
 				D5535839290E9718009E5D72 /* AppDelegate.swift in Sources */,
 				D5535847290F5E6F009E5D72 /* AppState.swift in Sources */,

Demo/Demo/AppState.swift

@@ -6,6 +6,8 @@ final class AppState: ObservableObject {
         case `default`
         case slide
         case crossFade
+        case flip
+        case flipVertically
         case slideAndFadeIn
         case slideAndFadeOut
         case moveVertically
@@ -21,6 +23,10 @@ final class AppState: ObservableObject {
                 return "Slide"
             case .crossFade:
                 return "Fade"
+            case .flip:
+                return "Flip"
+            case .flipVertically:
+                return "Flip Vertically"
             case .slideAndFadeIn:
                 return "Slide + Fade In"
             case .slideAndFadeOut:
@@ -44,6 +50,10 @@ final class AppState: ObservableObject {
                 return .slide
             case .crossFade:
                 return .fade(.cross)
+            case .flip:
+                return .flip
+            case .flipVertically:
+                return .flip(axis: .vertical)
             case .slideAndFadeIn:
                 return .slide.combined(with: .fade(.in))
             case .slideAndFadeOut:
@@ -53,7 +63,7 @@ final class AppState: ObservableObject {
             case .swing:
                 return .swing
             case .zoom:
-                return .zoom.combined(with: .fade(.in))
+                return .zoom
             case .zoomAndSlide:
                 return .zoom.combined(with: .slide)
             }

Demo/Demo/Custom Transitions/Flip.swift

@@ -0,0 +1,22 @@
+import NavigationTransition
+import SwiftUI
+
+extension AnyNavigationTransition {
+    static func flip(axis: Axis) -> Self {
+        .init(Flip(axis: axis))
+    }
+
+    static var flip: Self {
+        .flip(axis: .horizontal)
+    }
+}
+
+struct Flip: NavigationTransition {
+    var axis: Axis
+
+    var body: some NavigationTransition {
+        MirrorPush {
+            Rotate3D(.degrees(180), axis: axis == .horizontal ? (x: 1, y: 0, z: 0) : (x: 0, y: 1, z: 0))
+        }
+    }
+}

Demo/Demo/Swing.swift renamed to Demo/Demo/Custom Transitions/Swing.swift

@@ -11,6 +11,10 @@ struct Zoom: NavigationTransition {
     var body: some NavigationTransition {
         MirrorPush {
             Scale(0.5)
+            OnInsertion {
+                ZPosition(1)
+                Opacity()
+            }
         }
     }
 }

Demo/Demo/Zoom.swift renamed to Demo/Demo/Custom Transitions/Zoom.swift

@@ -5,7 +5,10 @@
 [![](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fdavdroman%2Fswiftui-navigation-transitions%2Fbadge%3Ftype%3Dplatforms)](https://swiftpackageindex.com/davdroman/swiftui-navigation-transitions)
 
 <p align="center">
-    <img width="320" src="https://user-images.githubusercontent.com/2538074/199754334-7f2f801d-1d9e-4cc4-a7a0-bb22c9835007.gif">
+<img width="320" src="https://user-images.githubusercontent.com/2538074/201549712-4234ca45-bdeb-42c4-9ee9-8d44b346ecdd.gif">
+<img width="320" src="https://user-images.githubusercontent.com/2538074/201549897-147e90a0-3773-42ab-94bc-1065fbb7a66b.gif">
+<img width="320" src="https://user-images.githubusercontent.com/2538074/201549995-62b86d4a-aa8b-4a6e-9bb4-5ed70cd47d84.gif">
+<img width="320" src="https://user-images.githubusercontent.com/2538074/201550282-64ce0f8e-8f99-4fe2-baf8-583e35c0518a.gif">
 </p>
 
 **NavigationTransitions** is a library that integrates seamlessly with SwiftUI's **Navigation** views, allowing complete customization over **push and pop transitions**!
@@ -17,7 +20,7 @@ The library is fully compatible with:
 
 ## Overview
 
-Instead of reinventing entire navigation components in order to customize its transitions, `NavigationTransitions` ships with a simple modifier that can be applied directly to SwiftUI's very own first-party navigation component.
+Instead of reinventing the entire navigation stack just to control its transitions, `NavigationTransitions` ships with a **simple modifier** that can be applied directly to SwiftUI's very own **first-party navigation** components.
 
 ### The Basics
 

README.md

@@ -40,16 +40,9 @@ public class AnimatorTransientView {
     }
 
     @_spi(package)public init(_ uiView: UIView) {
-        let properties = Properties(
-            alpha: uiView.alpha,
-            transform: uiView.transform,
-            layer: .init(
-                zPosition: uiView.layer.zPosition
-            )
-        )
-        self.initial = properties
-        self.animation = properties
-        self.completion = properties
+        self.initial = Properties(of: uiView)
+        self.animation = Properties(of: uiView)
+        self.completion = Properties(of: uiView)
 
         self.uiView = uiView
     }

Sources/Animator/AnimatorTransientView.swift

@@ -2,103 +2,31 @@ import UIKit
 
 /// Defines the allowed mutable properties in a transient view throughout each stage of the transition.
 public struct AnimatorTransientViewProperties: Equatable {
-    public typealias Layer = AnimatorTransientViewLayerProperties
-
     /// A proxy for `UIView.alpha`.
     @OptionalWithDefault
     public var alpha: CGFloat
 
-    /// A proxy for `UIView.transform`.
+    /// A proxy for `UIView.transform` or `UIView.transform3D`.
     @OptionalWithDefault
-    public var transform: CGAffineTransform
+    public var transform: Transform
 
-    /// A proxy for `UIView.layer`.
+    /// A proxy for `UIView.layer.zPosition`.
     @OptionalWithDefault
-    public var layer: Layer
-
-    func assignToUIView(_ uiView: UIView) {
-        $alpha.assignTo(uiView, \.alpha)
-        $transform.assignTo(uiView, \.transform)
-        $layer?.assignToUIView(uiView)
-    }
+    public var zPosition: CGFloat
 }
 
 extension AnimatorTransientViewProperties {
-    /// Convenience property for `CGAffineTransform` translation component.
-    public var translation: CGVector {
-        get { transform.translation }
-        set { transform.translation = newValue }
-    }
-
-    /// Convenience property for `CGAffineTransform` scale component.
-    public var scale: CGSize {
-        get { transform.scale }
-        set { transform.scale = newValue }
-    }
-
-    /// Convenience property for `CGAffineTransform` rotation component.
-    public var rotation: CGFloat {
-        get { transform.rotation }
-        set { transform.rotation = newValue }
-    }
-}
-
-extension CGAffineTransform {
-    var translation: CGVector {
-        get { components.translation }
-        set { components.translation = newValue }
-    }
-
-    var scale: CGSize {
-        get { components.scale }
-        set { components.scale = newValue }
+    init(of uiView: UIView) {
+        self.init(
+            alpha: uiView.alpha,
+            transform: .init(uiView.transform3D),
+            zPosition: uiView.layer.zPosition
+        )
     }
 
-    var rotation: CGFloat {
-        get { components.rotation }
-        set { components.rotation = newValue }
-    }
-
-    private typealias Components = _CGAffineTransformComponents
-
-    private var components: Components {
-        get {
-            Components(
-                scale: CGSize(
-                    width: sqrt(pow(a, 2) + pow(c, 2)),
-                    height: sqrt(pow(b, 2) + pow(d, 2))
-                ),
-                rotation: atan2(b, a),
-                translation: CGVector(dx: tx, dy: ty)
-            )
-        }
-        set {
-            guard components != newValue else { return }
-            self = CGAffineTransform(newValue)
-        }
-    }
-
-    private init(_ components: Components) {
-        self = .identity
-            .translatedBy(x: components.translation.dx, y: components.translation.dy)
-            .scaledBy(x: components.scale.width, y: components.scale.height)
-            .rotated(by: components.rotation)
-    }
-}
-
-public struct _CGAffineTransformComponents: Equatable {
-    /// Scaling in X and Y dimensions.
-    public var scale: CGSize
-
-    /// Rotation angle in radians.
-    public var rotation: Double
-
-    /// Displacement from the origin (ty, ty).
-    public var translation: CGVector
-
-    public init(scale: CGSize, rotation: Double, translation: CGVector) {
-        self.scale = scale
-        self.rotation = rotation
-        self.translation = translation
+    func assignToUIView(_ uiView: UIView) {
+        $alpha.assignTo(uiView, \.alpha)
+        $transform?.assignToUIView(uiView)
+        $zPosition.assignTo(uiView, \.layer.zPosition)
     }
 }

Sources/Animator/AnimatorTransientViewLayerProperties.swift

@@ -0,0 +1,98 @@
+import UIKit
+
+@dynamicMemberLookup
+public struct Transform: Equatable {
+    private var transform: CATransform3D
+
+    public subscript<T>(dynamicMember keyPath: WritableKeyPath<CATransform3D, T>) -> T {
+        get { transform[keyPath: keyPath] }
+        set { transform[keyPath: keyPath] = newValue }
+    }
+
+    init(_ transform: CATransform3D) {
+        self.transform = transform
+    }
+
+    func assignToUIView(_ uiView: UIView) {
+        if let transform = transform.affineTransform {
+            uiView.transform = transform
+        } else {
+            uiView.transform3D = transform
+        }
+    }
+}
+
+extension CATransform3D {
+    var affineTransform: CGAffineTransform? {
+        guard CATransform3DIsAffine(self) else {
+            return nil
+        }
+        return CATransform3DGetAffineTransform(self)
+    }
+}
+
+@_spi(package)
+extension CATransform3D: Equatable {
+    @inlinable
+    public static func == (lhs: Self, rhs: Self) -> Bool {
+        CATransform3DEqualToTransform(lhs, rhs)
+    }
+}
+
+extension Transform {
+    public static var identity: Self {
+        .init(.identity)
+    }
+
+    public mutating func translate(x: CGFloat = 0, y: CGFloat = 0, z: CGFloat = 0) {
+        transform = transform.translated(x: x, y: y, z: z)
+    }
+
+    public mutating func scale(x: CGFloat = 1, y: CGFloat = 1, z: CGFloat = 1) {
+        transform = transform.scaled(x: x, y: y, z: z)
+    }
+
+    public mutating func scale(_ s: CGFloat) {
+        transform = transform.scaled(x: s, y: s, z: s)
+    }
+
+    public mutating func rotate(by angle: CGFloat, x: CGFloat = 0, y: CGFloat = 0, z: CGFloat = 0) {
+        transform = transform.rotated(by: angle, x: x, y: y, z: z)
+    }
+
+    public func concatenated(with other: Self) -> Self {
+        .init(transform.concatenated(with: other.transform))
+    }
+}
+
+extension CATransform3D {
+    @inlinable
+    static var identity: Self {
+        CATransform3DIdentity
+    }
+
+    @inlinable
+    func translated(x: CGFloat, y: CGFloat, z: CGFloat) -> CATransform3D {
+        CATransform3DTranslate(self, x, y, z)
+    }
+
+    @inlinable
+    func scaled(x: CGFloat, y: CGFloat, z: CGFloat) -> CATransform3D {
+        CATransform3DScale(self, x, y, z)
+    }
+
+    @inlinable
+    func scaled(_ s: CGFloat) -> CATransform3D {
+        CATransform3DScale(self, s, s, s)
+    }
+
+    @inlinable
+    func rotated(by angle: CGFloat, x: CGFloat, y: CGFloat, z: CGFloat) -> CATransform3D {
+        CATransform3DRotate(self, angle, x, y, z)
+    }
+
+    @inlinable
+    func concatenated(with other: CATransform3D) -> CATransform3D {
+        CATransform3DConcat(self, other)
+    }
+}