💫 Update: Exp - AdaptiveModal

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

Hide file tree

Showing 4 changed files with 108 additions and 1 deletion.
diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift
@@ -37,7 +37,7 @@ struct AdaptiveModalInterpolationPoint: Equatable {
   let modalTranslateY: CGFloat;
 
   let modalOpacity: CGFloat;
-  //let modalBackgroundColor: UIColor;
+  let modalBackgroundColor: UIColor;
   let modalBackgroundOpacity: CGFloat;
 
   let modalCornerRadius: CGFloat;
@@ -151,6 +151,10 @@ struct AdaptiveModalInterpolationPoint: Equatable {
       ?? keyframePrev?.modalOpacity
       ?? 1;
 
+    self.modalBackgroundColor = keyframeCurrent?.modalBackgroundColor
+      ?? keyframePrev?.modalBackgroundColor
+      ?? .systemBackground;
+
     self.modalBackgroundOpacity = keyframeCurrent?.modalBackgroundOpacity
       ?? keyframePrev?.modalBackgroundOpacity
       ?? 1;
@@ -252,6 +256,7 @@ struct AdaptiveModalInterpolationPoint: Equatable {
 
   func apply(toModalBackgroundView modalBgView: UIView?){
     modalBgView?.alpha = self.modalBackgroundOpacity;
+    modalBgView?.backgroundColor = self.modalBackgroundColor;
   };
 
   func apply(toModalBackgroundEffectView effectView: UIVisualEffectView?){

diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager+Helpers.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager+Helpers.swift
@@ -92,6 +92,74 @@ extension AdaptiveModalManager {
     );
   };
 
+  static func interpolateColor(
+    inputValue    : CGFloat,
+    rangeInput    : [CGFloat],
+    rangeOutput   : [UIColor],
+    shouldClampMin: Bool = false,
+    shouldClampMax: Bool = false
+  ) -> UIColor? {
+    var rangeR: [CGFloat] = [];
+    var rangeG: [CGFloat] = [];
+    var rangeB: [CGFloat] = [];
+    var rangeA: [CGFloat] = [];
+
+    for color in rangeOutput {
+      let rgba = color.rgba;
+
+      rangeR.append(rgba.r);
+      rangeG.append(rgba.g);
+      rangeB.append(rgba.b);
+      rangeA.append(rgba.a);
+    };
+
+
+    let nextR = Self.interpolate(
+      inputValue: inputValue,
+      rangeInput: rangeInput,
+      rangeOutput: rangeR,
+      shouldClampMin: shouldClampMin,
+      shouldClampMax: shouldClampMax
+    );
+
+    let nextG = Self.interpolate(
+      inputValue: inputValue,
+      rangeInput: rangeInput,
+      rangeOutput: rangeG,
+      shouldClampMin: shouldClampMin,
+      shouldClampMax: shouldClampMax
+    );
+
+    let nextB = Self.interpolate(
+      inputValue: inputValue,
+      rangeInput: rangeInput,
+      rangeOutput: rangeB,
+      shouldClampMin: shouldClampMin,
+      shouldClampMax: shouldClampMax
+    );
+
+    let nextA = Self.interpolate(
+      inputValue: inputValue,
+      rangeInput: rangeInput,
+      rangeOutput: rangeA,
+      shouldClampMin: shouldClampMin,
+      shouldClampMax: shouldClampMax
+    );
+
+    guard let nextR = nextR,
+          let nextG = nextG,
+          let nextB = nextB,
+          let nextA = nextA
+    else { return nil };
+
+    return UIColor(
+      red  : nextR,
+      green: nextG,
+      blue : nextB,
+      alpha: nextA
+    );
+  };
+
   static func computeFinalPosition(
     position: CGFloat,
     initialVelocity: CGFloat,

diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager.swift
@@ -362,6 +362,30 @@ class AdaptiveModalManager {
     );
   };
 
+  func interpolateColor(
+    inputValue: CGFloat,
+    rangeInput: [CGFloat]? = nil,
+    rangeOutput: [AdaptiveModalInterpolationPoint]? = nil,
+    rangeOutputKey: KeyPath<AdaptiveModalInterpolationPoint, UIColor>,
+    shouldClampMin: Bool = false,
+    shouldClampMax: Bool = false
+  ) -> UIColor? {
+
+    guard let interpolationSteps      = rangeOutput ?? self.interpolationStepsSorted,
+          let interpolationRangeInput = rangeInput  ?? self.interpolationRangeInput
+    else { return nil };
+
+    return Self.interpolateColor(
+      inputValue: inputValue,
+      rangeInput: interpolationRangeInput,
+      rangeOutput: interpolationSteps.map {
+        $0[keyPath: rangeOutputKey];
+      },
+      shouldClampMin: shouldClampMin,
+      shouldClampMax: shouldClampMax
+    );
+  };
+
   func getInterpolationStepRange(
    forInputPercentValue inputPercentValue: CGFloat
   ) -> (
@@ -677,6 +701,15 @@ class AdaptiveModalManager {
       )
     );
 
+    Self.setProperty(
+      forObject: self.modalBackgroundView,
+      forPropertyKey: \.backgroundColor,
+      withValue:  self.interpolateColor(
+        inputValue: inputPercentValue,
+        rangeOutputKey: \.modalBackgroundColor
+      )
+    );
+
     Self.setProperty(
       forObject: self.modalBackgroundView,
       forPropertyKey: \.alpha,

diff --git a/experiments/swift-programmatic-modal/Test/RNIDraggableTestViewController.swift b/experiments/swift-programmatic-modal/Test/RNIDraggableTestViewController.swift
@@ -237,6 +237,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
             ),
             animationKeyframe: AdaptiveModalAnimationConfig(
               //modalOpacity: 0.5,
+              //modalBackgroundColor: .red,
               modalBackgroundOpacity: 0.85,
               modalCornerRadius: 15,
               modalMaskedCorners: [