💫 Update: Exp - AdaptiveModal

Summary: Update experiment/test - `swift-programmatic-modal/AdaptiveModal`.
dominicstop · Jun 18, 2023 · b70b76e · b70b76e
1 parent 01b0678
commit b70b76e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 34 deletions.
diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalAnimationConfig.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalAnimationConfig.swift
@@ -17,10 +17,6 @@ struct AdaptiveModalAnimationConfig {
   var modalTranslateX: CGFloat?;
   var modalTranslateY: CGFloat?;
 
-  var modalOpacity: CGFloat?;
-  var modalBackgroundColor: UIColor?;
-  var modalBackgroundOpacity: CGFloat?;
-
   var modalBorderWidth: CGFloat?;
   var modalBorderColor: UIColor?;
 
@@ -32,6 +28,10 @@ struct AdaptiveModalAnimationConfig {
   var modalCornerRadius: CGFloat?;
   var modalMaskedCorners: CACornerMask?;
 
+  var modalOpacity: CGFloat?;
+  var modalBackgroundColor: UIColor?;
+  var modalBackgroundOpacity: CGFloat?;
+
   var modalBackgroundVisualEffect: UIVisualEffect?;
   var modalBackgroundVisualEffectOpacity: CGFloat?;
   var modalBackgroundVisualEffectIntensity: CGFloat?;
@@ -49,9 +49,6 @@ struct AdaptiveModalAnimationConfig {
      modalScaleY: CGFloat? = nil,
      modalTranslateX: CGFloat? = nil,
      modalTranslateY: CGFloat? = nil,
-     modalOpacity: CGFloat? = nil,
-     modalBackgroundColor: UIColor? = nil,
-     modalBackgroundOpacity: CGFloat? = nil,
      modalBorderWidth: CGFloat? = nil,
      modalBorderColor: UIColor? = nil,
      modalShadowColor: UIColor? = nil,
@@ -60,6 +57,9 @@ struct AdaptiveModalAnimationConfig {
      modalShadowRadius: CGFloat? = nil,
      modalCornerRadius: CGFloat? = nil,
      modalMaskedCorners: CACornerMask? = nil,
+     modalOpacity: CGFloat? = nil,
+     modalBackgroundColor: UIColor? = nil,
+     modalBackgroundOpacity: CGFloat? = nil,
      modalBackgroundVisualEffect: UIVisualEffect? = nil,
      modalBackgroundVisualEffectOpacity: CGFloat? = nil,
      modalBackgroundVisualEffectIntensity: CGFloat? = nil,
@@ -77,10 +77,6 @@ struct AdaptiveModalAnimationConfig {
     self.modalTranslateX = modalTranslateX;
     self.modalTranslateY = modalTranslateY;
 
-    self.modalOpacity = modalOpacity;
-    self.modalBackgroundColor = modalBackgroundColor;
-    self.modalBackgroundOpacity = modalBackgroundOpacity;
-
     self.modalBorderWidth = modalBorderWidth;
     self.modalBorderColor = modalBorderColor;
 
@@ -92,6 +88,10 @@ struct AdaptiveModalAnimationConfig {
     self.modalCornerRadius = modalCornerRadius;
     self.modalMaskedCorners = modalMaskedCorners;
 
+    self.modalOpacity = modalOpacity;
+    self.modalBackgroundColor = modalBackgroundColor;
+    self.modalBackgroundOpacity = modalBackgroundOpacity;
+
     self.modalBackgroundVisualEffect = modalBackgroundVisualEffect;
     self.modalBackgroundVisualEffectOpacity = modalBackgroundVisualEffectOpacity;
     self.modalBackgroundVisualEffectIntensity = modalBackgroundVisualEffectIntensity;

diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift
@@ -36,10 +36,6 @@ struct AdaptiveModalInterpolationPoint: Equatable {
   var modalTranslateX: CGFloat;
   var modalTranslateY: CGFloat;
 
-  var modalOpacity: CGFloat;
-  var modalBackgroundColor: UIColor;
-  var modalBackgroundOpacity: CGFloat;
-
   var modalBorderWidth: CGFloat;
   var modalBorderColor: UIColor;
 
@@ -51,6 +47,10 @@ struct AdaptiveModalInterpolationPoint: Equatable {
   var modalCornerRadius: CGFloat;
   var modalMaskedCorners: CACornerMask;
 
+  var modalOpacity: CGFloat;
+  var modalBackgroundColor: UIColor;
+  var modalBackgroundOpacity: CGFloat;
+
   var modalBackgroundVisualEffect: UIVisualEffect?;
   var modalBackgroundVisualEffectOpacity: CGFloat;
   var modalBackgroundVisualEffectIntensity: CGFloat;
@@ -251,18 +251,6 @@ extension AdaptiveModalInterpolationPoint {
       ?? keyframePrev?.modalTranslateY
       ?? 0;
 
-    self.modalOpacity = keyframeCurrent?.modalOpacity
-      ?? keyframePrev?.modalOpacity
-      ?? 1;
-
-    self.modalBackgroundColor = keyframeCurrent?.modalBackgroundColor
-      ?? keyframePrev?.modalBackgroundColor
-      ?? .systemBackground;
-
-    self.modalBackgroundOpacity = keyframeCurrent?.modalBackgroundOpacity
-      ?? keyframePrev?.modalBackgroundOpacity
-      ?? 1;
-
     self.modalBorderWidth = keyframeCurrent?.modalBorderWidth
       ?? keyframePrev?.modalBorderWidth
       ?? 0;
@@ -295,6 +283,18 @@ extension AdaptiveModalInterpolationPoint {
       ?? keyframePrev?.modalMaskedCorners
       ?? Self.DefaultMaskedCorners;
 
+    self.modalOpacity = keyframeCurrent?.modalOpacity
+      ?? keyframePrev?.modalOpacity
+      ?? 1;
+
+    self.modalBackgroundColor = keyframeCurrent?.modalBackgroundColor
+      ?? keyframePrev?.modalBackgroundColor
+      ?? .systemBackground;
+
+    self.modalBackgroundOpacity = keyframeCurrent?.modalBackgroundOpacity
+      ?? keyframePrev?.modalBackgroundOpacity
+      ?? 1;
+
     self.modalBackgroundVisualEffect = keyframeCurrent?.modalBackgroundVisualEffect
       ?? keyframePrev?.modalBackgroundVisualEffect;
 

diff --git a/experiments/swift-programmatic-modal/Test/AdaptiveModalConfigTestPresets.swift b/experiments/swift-programmatic-modal/Test/AdaptiveModalConfigTestPresets.swift
@@ -401,7 +401,6 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
             ),
             animationKeyframe: AdaptiveModalAnimationConfig(
               //modalOpacity: 1,
-              modalBackgroundOpacity: 0.9,
               modalShadowOffset: .init(width: 0, height: -2),
               modalShadowOpacity: 0.2,
               modalShadowRadius: 7,
@@ -410,6 +409,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
                 .layerMinXMinYCorner,
                 .layerMaxXMinYCorner
               ],
+              modalBackgroundOpacity: 0.9,
               modalBackgroundVisualEffect: UIBlurEffect(style: .systemUltraThinMaterial),
               modalBackgroundVisualEffectIntensity: 1,
               backgroundOpacity: 0,
@@ -436,7 +436,6 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
             animationKeyframe: AdaptiveModalAnimationConfig(
               //modalOpacity: 0.5,
               //modalBackgroundColor: .red,
-              modalBackgroundOpacity: 0.85,
               modalShadowOffset: .init(width: 2, height: 2),
               modalShadowOpacity: 0.2,
               modalShadowRadius: 15,
@@ -447,6 +446,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
                 .layerMinXMaxYCorner,
                 .layerMaxXMaxYCorner
               ],
+              modalBackgroundOpacity: 0.85,
               modalBackgroundVisualEffectIntensity: 0.6,
               //backgroundColor: .red,
               backgroundOpacity: 0.1,
@@ -469,7 +469,6 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
               )
             ),
             animationKeyframe: AdaptiveModalAnimationConfig(
-              modalBackgroundOpacity: 0.8,
               modalShadowOffset: .init(width: 2, height: 2),
               modalShadowOpacity: 0.3,
               modalShadowRadius: 10,
@@ -480,6 +479,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
                 .layerMaxXMinYCorner,
                 .layerMaxXMaxYCorner
               ],
+              modalBackgroundOpacity: 0.8,
               modalBackgroundVisualEffectIntensity: 1,
               backgroundOpacity: 0,
               //backgroundVisualEffectOpacity: 0.5,
@@ -501,7 +501,6 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
               marginTop: .safeAreaInsets(insetKey: \.top)
             ),
             animationKeyframe: AdaptiveModalAnimationConfig(
-              modalBackgroundOpacity: 0.83,
               modalShadowOffset: .init(width: 0, height: -1),
               modalShadowOpacity: 0.4,
               modalShadowRadius: 10,
@@ -510,6 +509,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
                 .layerMinXMinYCorner,
                 .layerMaxXMinYCorner,
               ],
+              modalBackgroundOpacity: 0.83,
               modalBackgroundVisualEffectIntensity: 1,
               backgroundVisualEffectIntensity: 1
             )
@@ -625,8 +625,15 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
             animationKeyframe: AdaptiveModalAnimationConfig(
               modalScaleX: 1,
               modalScaleY: 1,
+              modalShadowOffset: .init(width: 1, height: 1),
+              modalShadowOpacity: 0.3,
+              modalShadowRadius: 8,
+              modalCornerRadius: 10,
+              modalBackgroundOpacity: 0.87,
+              modalBackgroundVisualEffect: UIBlurEffect(style: .regular),
+              modalBackgroundVisualEffectIntensity: 1,
               backgroundVisualEffect: UIBlurEffect(style: .regular),
-              backgroundVisualEffectIntensity: 0
+              backgroundVisualEffectIntensity: 0.04
             )
           ),
           // snap point - 2
@@ -644,7 +651,12 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
               marginRight: .constant(20)
             ),
             animationKeyframe: AdaptiveModalAnimationConfig(
-              backgroundVisualEffect: UIBlurEffect(style: .regular),
+              modalShadowOffset: .init(width: 2, height: 2),
+              modalShadowOpacity: 0.2,
+              modalShadowRadius: 15,
+              modalCornerRadius: 15,
+              modalBackgroundOpacity: 0.9,
+              modalBackgroundVisualEffectIntensity: 0.5,
               backgroundVisualEffectIntensity: 0.5
             )
           ),
@@ -655,7 +667,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
           animationKeyframe: .init(
             modalScaleX: 0.5,
             modalScaleY: 0.5,
-            backgroundVisualEffect: UIBlurEffect(style: .regular),
+            modalCornerRadius: 5,
             backgroundVisualEffectIntensity: 0
           )
         ),