💫 Update: Exp - AdaptiveModal

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

Hide file tree

Showing 3 changed files with 115 additions and 10 deletions.
diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift
@@ -65,6 +65,10 @@ struct AdaptiveModalInterpolationPoint: Equatable {
       .init(scaleX: self.modalScaleX, y: self.modalScaleY)
     );
 
+    transforms.append(
+      .init(translationX: self.modalTranslateX, y: modalTranslateY)
+    );
+
     return transforms;
   };
 
@@ -216,7 +220,7 @@ struct AdaptiveModalInterpolationPoint: Equatable {
   };
 
   func apply(toModalView modalView: UIView){
-    //modalView.frame = self.computedRect;
+    modalView.transform = self.modalTransform;
 
     modalView.layer.cornerRadius = self.modalCornerRadius;
     modalView.layer.maskedCorners = self.modalMaskedCorners;

diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager.swift
@@ -456,6 +456,101 @@ class AdaptiveModalManager {
     );
   };
 
+  func interpolateModalTransform(
+    forInputPercentValue inputPercentValue: CGFloat,
+    rangeInput: [CGFloat]? = nil,
+    rangeOutput: [AdaptiveModalInterpolationPoint]? = nil
+  ) -> CGAffineTransform? {
+
+    guard let interpolationSteps      = rangeOutput ?? self.interpolationStepsSorted,
+          let interpolationRangeInput = rangeInput  ?? self.interpolationRangeInput
+    else { return nil };
+
+    let clampConfig = modalConfig.interpolationClampingConfig;
+
+    let nextModalRotation = Self.interpolate(
+      inputValue: inputPercentValue,
+      rangeInput: interpolationRangeInput,
+      rangeOutput: interpolationSteps.map {
+        $0.modalRotation
+      },
+      shouldClampMin: clampConfig.shouldClampModalInitRotation,
+      shouldClampMax: clampConfig.shouldClampModalLastRotation
+    );
+
+    let nextScaleX = Self.interpolate(
+      inputValue: inputPercentValue,
+      rangeInput: interpolationRangeInput,
+      rangeOutput: interpolationSteps.map {
+        $0.modalScaleX;
+      },
+      shouldClampMin: clampConfig.shouldClampModalLastScaleX,
+      shouldClampMax: clampConfig.shouldClampModalLastScaleX
+    );
+
+    let nextScaleY = Self.interpolate(
+      inputValue: inputPercentValue,
+      rangeInput: interpolationRangeInput,
+      rangeOutput: interpolationSteps.map {
+        $0.modalScaleY
+      },
+      shouldClampMin: clampConfig.shouldClampModalLastScaleY,
+      shouldClampMax: clampConfig.shouldClampModalLastScaleY
+    );
+
+    let nextTranslateX = Self.interpolate(
+      inputValue: inputPercentValue,
+      rangeInput: interpolationRangeInput,
+      rangeOutput: interpolationSteps.map {
+        $0.modalTranslateX
+      },
+      shouldClampMin: clampConfig.shouldClampModalInitTranslateX,
+      shouldClampMax: clampConfig.shouldClampModalLastTranslateX
+    );
+
+    let nextTranslateY = Self.interpolate(
+      inputValue: inputPercentValue,
+      rangeInput: interpolationRangeInput,
+      rangeOutput: interpolationSteps.map {
+        $0.modalTranslateY
+      },
+      shouldClampMin: clampConfig.shouldClampModalInitTranslateY,
+      shouldClampMax: clampConfig.shouldClampModalLastTranslateY
+    );
+
+    let nextTransform: CGAffineTransform = {
+      var transforms: [CGAffineTransform] = [];
+
+      if let rotation = nextModalRotation {
+        transforms.append(
+          .init(rotationAngle: rotation)
+        );
+      };
+
+      if let nextScaleX = nextScaleX,
+         let nextScaleY = nextScaleY {
+
+        transforms.append(
+          .init(scaleX: nextScaleX, y: nextScaleY)
+        );
+      };
+
+      if let nextTranslateX = nextTranslateX,
+         let nextTranslateY = nextTranslateY {
+
+        transforms.append(
+          .init(translationX: nextTranslateX, y: nextTranslateY)
+        );
+      };
+
+      return transforms.reduce(.identity) {
+        $0.concatenating($1);
+      };
+    }();
+
+    return nextTransform;
+  };
+
   func interpolateModalBackgroundOpacity(
     forInputPercentValue inputPercentValue: CGFloat,
     rangeInput: [CGFloat]? = nil,
@@ -616,6 +711,12 @@ class AdaptiveModalManager {
       self.modalFrame = nextModalRect;
     };
 
+    if let nextModalTransform = self.interpolateModalTransform(
+      forInputPercentValue: inputPercentValue
+    ) {
+      modalView.transform = nextModalTransform;
+    };
+
     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
@@ -10,7 +10,7 @@ import UIKit
 
 enum AdaptiveModalConfigTestPresets: CaseIterable {
 
-  static let `default`: Self = .testModalTransform01;
+  static let `default`: Self = .test03;
 
   case testModalTransform01;
 
@@ -35,11 +35,11 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
               )
             ),
             animationKeyframe: AdaptiveModalAnimationConfig(
-              //modalRotation: -0.2,
+              modalRotation: 0.2,
               modalScaleX: 0.5,
-              modalScaleY: 0.5
-              //modalTranslateX: 0,
-              //modalTranslateY: 0
+              modalScaleY: 0.5,
+              modalTranslateX: -100,
+              modalTranslateY: 20
             )
           ),
 
@@ -56,11 +56,11 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
               )
             ),
             animationKeyframe: AdaptiveModalAnimationConfig(
-              //modalRotation: 0.1,
+              modalRotation: -0.2,
               modalScaleX: 0.5,
-              modalScaleY: 1
-              //modalTranslateX: 0,
-              //modalTranslateY: 0
+              modalScaleY: 1,
+              modalTranslateX: 0,
+              modalTranslateY: 0
             )
           ),
           // snap point - 2