💫 Update: Exp - AdaptiveModal

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

Hide file tree

Showing 4 changed files with 37 additions and 1 deletion.
diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalAnimationConfig.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalAnimationConfig.swift
@@ -17,6 +17,7 @@ struct AdaptiveModalAnimationConfig {
   let modalTranslateX: CGFloat?;
   let modalTranslateY: CGFloat?;
 
+  let modalOpacity: CGFloat?;
   let modalBackgroundColor: UIColor?;
   let modalBackgroundOpacity: CGFloat?;
 
@@ -38,6 +39,7 @@ struct AdaptiveModalAnimationConfig {
      modalScaleY: CGFloat? = nil,
      modalTranslateX: CGFloat? = nil,
      modalTranslateY: CGFloat? = nil,
+     modalOpacity: CGFloat? = nil,
      modalBackgroundColor: UIColor? = nil,
      modalBackgroundOpacity: CGFloat? = nil,
      modalCornerRadius: CGFloat? = nil,
@@ -57,6 +59,7 @@ struct AdaptiveModalAnimationConfig {
     self.modalTranslateX = modalTranslateX;
     self.modalTranslateY = modalTranslateY;
 
+    self.modalOpacity = modalOpacity;
     self.modalBackgroundColor = modalBackgroundColor;
     self.modalBackgroundOpacity = modalBackgroundOpacity;
 

diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift
@@ -36,6 +36,7 @@ struct AdaptiveModalInterpolationPoint: Equatable {
   let modalTranslateX: CGFloat;
   let modalTranslateY: CGFloat;
 
+  let modalOpacity: CGFloat;
   //let modalBackgroundColor: UIColor;
   let modalBackgroundOpacity: CGFloat;
 
@@ -144,6 +145,10 @@ struct AdaptiveModalInterpolationPoint: Equatable {
       ?? keyframePrev?.modalTranslateY
       ?? 0;
 
+    self.modalOpacity = keyframeCurrent?.modalOpacity
+      ?? keyframePrev?.modalOpacity
+      ?? 1;
+
     self.modalBackgroundOpacity = keyframeCurrent?.modalBackgroundOpacity
       ?? keyframePrev?.modalBackgroundOpacity
       ?? 1;
@@ -221,13 +226,13 @@ struct AdaptiveModalInterpolationPoint: Equatable {
 
   func apply(toModalView modalView: UIView){
     modalView.transform = self.modalTransform;
+    modalView.alpha = self.modalOpacity;
 
     modalView.layer.cornerRadius = self.modalCornerRadius;
     modalView.layer.maskedCorners = self.modalMaskedCorners;
   };
 
   func apply(toModalWrapperView modalWrapperView: UIView){
-    //modalView.frame = self.computedRect;
     modalWrapperView.frame = self.computedRect;
   };
 

diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager.swift
@@ -551,6 +551,25 @@ class AdaptiveModalManager {
     return nextTransform;
   };
 
+  func interpolateOpacity(
+    forInputPercentValue inputPercentValue: CGFloat,
+    rangeInput: [CGFloat]? = nil,
+    rangeOutput: [AdaptiveModalInterpolationPoint]? = nil
+  ) -> CGFloat? {
+
+    guard let interpolationSteps      = rangeOutput ?? self.interpolationStepsSorted,
+          let interpolationRangeInput = rangeInput  ?? self.interpolationRangeInput
+    else { return nil };
+
+    return Self.interpolate(
+      inputValue: inputPercentValue,
+      rangeInput: interpolationRangeInput,
+      rangeOutput: interpolationSteps.map {
+        $0.modalOpacity
+      }
+    );
+  };
+
   func interpolateModalBackgroundOpacity(
     forInputPercentValue inputPercentValue: CGFloat,
     rangeInput: [CGFloat]? = nil,
@@ -717,6 +736,12 @@ class AdaptiveModalManager {
       modalView.transform = nextModalTransform;
     };
 
+    if let nextModalOpacity = self.interpolateOpacity(
+      forInputPercentValue: inputPercentValue
+    ) {
+      modalView.alpha = nextModalOpacity;
+    };
+
     if let nextModalRadius = self.interpolateModalBorderRadius(
       forInputPercentValue: inputPercentValue,
       modalBounds: modalView.bounds

diff --git a/experiments/swift-programmatic-modal/Test/RNIDraggableTestViewController.swift b/experiments/swift-programmatic-modal/Test/RNIDraggableTestViewController.swift
@@ -204,6 +204,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
               )
             ),
             animationKeyframe: AdaptiveModalAnimationConfig(
+              //modalOpacity: 1,
               modalBackgroundOpacity: 0.9,
               modalCornerRadius: 15,
               modalMaskedCorners: [
@@ -212,6 +213,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
               ],
               modalBackgroundVisualEffect: UIBlurEffect(style: .systemUltraThinMaterial),
               modalBackgroundVisualEffectIntensity: 1,
+
               backgroundOpacity: 0,
               backgroundVisualEffect: UIBlurEffect(style: .systemUltraThinMaterialDark),
               backgroundVisualEffectIntensity: 0
@@ -233,6 +235,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
               marginBottom: 15
             ),
             animationKeyframe: AdaptiveModalAnimationConfig(
+              //modalOpacity: 0.5,
               modalBackgroundOpacity: 0.85,
               modalCornerRadius: 15,
               modalMaskedCorners: [