💫 Update: Exp - AdaptiveModal

Summary: Update experiment/test - `swift-programmatic-modal/AdaptiveModal`.
dominicstop · Jun 5, 2023 · dbbc54f · dbbc54f
1 parent 251c212
commit dbbc54f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 1 deletion.
diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalAnimationConfig.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalAnimationConfig.swift
@@ -32,6 +32,7 @@ struct AdaptiveModalAnimationConfig {
   let backgroundOpacity: CGFloat?;
 
   let backgroundVisualEffect: UIVisualEffect?;
+  let backgroundVisualEffectOpacity: CGFloat?;
   let backgroundVisualEffectIntensity: CGFloat?;
 
   init(
@@ -51,6 +52,7 @@ struct AdaptiveModalAnimationConfig {
      backgroundColor: UIColor? = nil,
      backgroundOpacity: CGFloat? = nil,
      backgroundVisualEffect: UIVisualEffect? = nil,
+     backgroundVisualEffectOpacity: CGFloat? = nil,
      backgroundVisualEffectIntensity: CGFloat? = nil
   ) {
     self.modalRotation = modalRotation;
@@ -76,6 +78,7 @@ struct AdaptiveModalAnimationConfig {
     self.backgroundOpacity = backgroundOpacity;
 
     self.backgroundVisualEffect = backgroundVisualEffect;
+    self.backgroundVisualEffectOpacity = backgroundVisualEffectOpacity;
     self.backgroundVisualEffectIntensity = backgroundVisualEffectIntensity;
   };
 };
diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift
@@ -51,6 +51,7 @@ struct AdaptiveModalInterpolationPoint: Equatable {
   let backgroundOpacity: CGFloat;
 
   let backgroundVisualEffect: UIVisualEffect?;
+  let backgroundVisualEffectOpacity: CGFloat;
   let backgroundVisualEffectIntensity: CGFloat;
 
   // MARK: - Computed Properties
@@ -180,6 +181,10 @@ struct AdaptiveModalInterpolationPoint: Equatable {
     self.backgroundVisualEffect = keyframeCurrent?.backgroundVisualEffect
       ?? keyframePrev?.backgroundVisualEffect;
 
+    self.backgroundVisualEffectOpacity = keyframeCurrent?.backgroundVisualEffectOpacity
+      ?? keyframePrev?.backgroundVisualEffectOpacity
+      ?? 1;
+
     self.backgroundVisualEffectIntensity = keyframeCurrent?.backgroundVisualEffectIntensity
       ?? keyframePrev?.backgroundVisualEffectIntensity
       ?? 1;
@@ -256,6 +261,10 @@ struct AdaptiveModalInterpolationPoint: Equatable {
   func apply(toBackgroundView bgView: UIView?){
     bgView?.alpha = self.backgroundOpacity;
   };
+
+  func apply(toBackgroundVisualEffectView effectView: UIView?){
+    effectView?.alpha = self.backgroundVisualEffectOpacity;
+  };
 };
 
 extension AdaptiveModalInterpolationPoint {

diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager.swift
@@ -704,6 +704,15 @@ class AdaptiveModalManager {
       )
     );
 
+    Self.setProperty(
+      forObject: self.backgroundVisualEffectView,
+      forPropertyKey: \.alpha,
+      withValue:  self.interpolate(
+        inputValue: inputPercentValue,
+        rangeOutputKey: \.backgroundVisualEffectOpacity
+      )
+    );
+
     self.applyInterpolationToBackgroundVisualEffect(
       forInputPercentValue: inputPercentValue
     );
@@ -826,7 +835,8 @@ class AdaptiveModalManager {
       interpolationPoint.apply(toModalBackgroundView: self.modalBackgroundView);
       interpolationPoint.apply(toBackgroundView: self.backgroundDimmingView);
 
-      interpolationPoint.apply(toModalBackgroundEffectView: self.modalBackgroundVisualEffectView)
+      interpolationPoint.apply(toModalBackgroundEffectView: self.modalBackgroundVisualEffectView);
+      interpolationPoint.apply(toBackgroundVisualEffectView: self.backgroundVisualEffectView);
     };
 
     if let completion = completion {

diff --git a/experiments/swift-programmatic-modal/Test/RNIDraggableTestViewController.swift b/experiments/swift-programmatic-modal/Test/RNIDraggableTestViewController.swift
@@ -219,6 +219,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
               backgroundVisualEffectIntensity: 0
             )
           ),
+
           // Snap Point 2
           AdaptiveModalSnapPointConfig(
             snapPoint: RNILayout(
@@ -249,6 +250,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
               backgroundVisualEffectIntensity: 0.075
             )
           ),
+
           // Snap Point 3
           AdaptiveModalSnapPointConfig(
             snapPoint: RNILayout(
@@ -274,9 +276,12 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
               ],
               modalBackgroundVisualEffectIntensity: 1,
               backgroundOpacity: 0,
+              //backgroundVisualEffectOpacity: 0.5,
               backgroundVisualEffectIntensity: 0.5
             )
           ),
+
+          // Snap Point 4
           AdaptiveModalSnapPointConfig(
             snapPoint: RNILayout(
               horizontalAlignment: .center,