💫 Update: Exp - AdaptiveModal

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

Hide file tree

Showing 3 changed files with 151 additions and 21 deletions.
diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift
@@ -212,7 +212,7 @@ extension AdaptiveModalInterpolationPoint {
             context.targetRect[keyPath: modalConfig.maxInputRangeKeyForRect];
 
           let inputValue =
-            computedRect.origin[keyPath: modalConfig.inputValueKeyForPoint];
+            computedRect[keyPath: modalConfig.inputValueKeyForRect];
 
           let percent = inputValue / maxRangeInput;
 

diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalManager.swift
@@ -749,7 +749,9 @@ class AdaptiveModalManager: NSObject {
     guard let animator = animator else { return };
     self.modalBackgroundVisualEffectAnimator = animator;
 
-    animator.setFractionComplete(forInputPercentValue: inputPercentValue);
+    animator.setFractionComplete(
+      forInputPercentValue: inputPercentValue.clamped(min: 0, max: 1)
+    );
   };
 
   private func applyInterpolationToBackgroundVisualEffect(
@@ -793,7 +795,9 @@ class AdaptiveModalManager: NSObject {
     guard let animator = animator else { return };
     self.backgroundVisualEffectAnimator = animator;
 
-    animator.setFractionComplete(forInputPercentValue: inputPercentValue);
+    animator.setFractionComplete(
+      forInputPercentValue: inputPercentValue.clamped(min: 0, max: 1)
+    );
   };
 
   // MARK: - Functions - Apply Interpolators
@@ -980,15 +984,6 @@ class AdaptiveModalManager: NSObject {
     let percentAdj = shouldInvertPercent
       ? AdaptiveModalUtilities.invertPercent(percent)
       : percent;
-
-    print(
-        "applyInterpolationToModal"
-      + "\n - inputValue: \(inputValue)"
-      + "\n - interpolationRangeMaxInput: \(interpolationRangeMaxInput)"
-      + "\n - percent: \(percent)"
-      + "\n - interpolationRangeInput: \(self.interpolationRangeInput!)"
-      + "\n"
-    );
 
     self.applyInterpolationToModal(forInputPercentValue: percentAdj);
   };
@@ -1348,15 +1343,14 @@ class AdaptiveModalManager: NSObject {
     guard prevModalFrame != nextModalFrame else { return };
 
     let inputCoord =
-      nextModalFrame.origin[keyPath: self.modalConfig.inputValueKeyForPoint];
+      nextModalFrame[keyPath: self.modalConfig.inputValueKeyForRect];
 
     let percent = inputCoord / interpolationRangeMaxInput;
 
     let percentAdj = self.modalConfig.shouldInvertPercent
       ? AdaptiveModalUtilities.invertPercent(percent)
       : percent;
 
-
     self.applyInterpolationToBackgroundVisualEffect(
       forInputPercentValue: percentAdj
     );
@@ -1404,10 +1398,10 @@ class AdaptiveModalManager: NSObject {
   private func notifyOnModalDidSnap() {
     self.eventDelegate?.notifyOnModalDidSnap(
       prevSnapPointIndex:
-        interpolationSteps[self.prevInterpolationIndex].snapPointIndex,
+        self.interpolationSteps[self.prevInterpolationIndex].snapPointIndex,
 
       currentSnapPointIndex:
-        interpolationSteps[self.currentInterpolationIndex].snapPointIndex,
+        self.interpolationSteps[self.currentInterpolationIndex].snapPointIndex,
 
       snapPointConfig: self.currentSnapPointConfig,
       interpolationPoint: self.currentInterpolationStep

diff --git a/experiments/swift-programmatic-modal/Test/AdaptiveModalConfigTestPresets.swift b/experiments/swift-programmatic-modal/Test/AdaptiveModalConfigTestPresets.swift
@@ -9,19 +9,26 @@ import UIKit
 
 enum AdaptiveModalConfigTestPresets: CaseIterable {
 
-  static let `default`: Self = .testLeftToRight;
+  static let `default`: Self = .demo03;
 
   case testModalTransform01;
+  case testModalTransformScale;
   case testModalBorderAndShadow01;
   case testLeftToRight;
 
   case test01;
   case test02;
-  case test03;
-  case test04;
+
+  case demo01;
+  case demo02;
+  case demo03;
 
   var config: AdaptiveModalConfig {
     switch self {
+
+      // MARK: - Tests
+      // -------------
+
       case .testModalTransform01: return AdaptiveModalConfig(
         snapPoints: [
           // snap point - 0
@@ -92,6 +99,74 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
         )
       );
 
+      case .testModalTransformScale: return AdaptiveModalConfig(
+        snapPoints: [
+          // snap point - 0
+          AdaptiveModalSnapPointConfig(
+            snapPoint: RNILayout(
+              horizontalAlignment: .center,
+              verticalAlignment: .bottom,
+              width: RNILayoutValue(
+                mode: .percent(percentValue: 0.8)
+              ),
+              height: RNILayoutValue(
+                mode: .percent(percentValue: 0.2)
+              )
+            ),
+            animationKeyframe: AdaptiveModalAnimationConfig(
+              modalScaleX: 1,
+              modalScaleY: 1
+            )
+          ),
+
+          // snap point - 1
+          AdaptiveModalSnapPointConfig(
+            snapPoint: RNILayout(
+              horizontalAlignment: .center,
+              verticalAlignment: .bottom,
+              width: RNILayoutValue(
+                mode: .percent(percentValue: 0.8)
+              ),
+              height: RNILayoutValue(
+                mode: .percent(percentValue: 0.4)
+              )
+            ),
+            animationKeyframe: AdaptiveModalAnimationConfig(
+              modalScaleX: 0.5,
+              modalScaleY: 1
+            )
+          ),
+          // snap point - 2
+          AdaptiveModalSnapPointConfig(
+            snapPoint: RNILayout(
+              horizontalAlignment: .center,
+              verticalAlignment: .bottom,
+              width: RNILayoutValue(
+                mode: .percent(percentValue: 0.8)
+              ),
+              height: RNILayoutValue(
+                mode: .percent(percentValue: 0.6)
+              )
+            ),
+            animationKeyframe: AdaptiveModalAnimationConfig(
+              modalScaleX: 1.5,
+              modalScaleY: 1.5
+            )
+          ),
+        ],
+        snapDirection: .bottomToTop,
+        undershootSnapPoint: .init(
+          layoutPreset: .offscreenBottom,
+          animationKeyframe: .init(
+            modalScaleX: 0.25,
+            modalScaleY: 0.25
+          )
+        ),
+        overshootSnapPoint: AdaptiveModalSnapPointPreset(
+          layoutPreset: .fitScreenVertically
+        )
+      );
+
       case .testModalBorderAndShadow01: return AdaptiveModalConfig(
         snapPoints: [
           // snap point - 0
@@ -247,6 +322,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
           ),
         ],
         snapDirection: .bottomToTop
+        //snapPercentStrategy: .index
       );
 
       case .test02: return AdaptiveModalConfig(
@@ -306,7 +382,10 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
         )
       );
 
-      case .test03: return AdaptiveModalConfig(
+      // MARK: - Demos
+      // -------------
+
+      case .demo01: return AdaptiveModalConfig(
         snapPoints: [
           // Snap Point 1
           AdaptiveModalSnapPointConfig(
@@ -447,7 +526,7 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
         )
       );
 
-      case .test04: return AdaptiveModalConfig(
+      case .demo02: return AdaptiveModalConfig(
         snapPoints: [
           // snap point - 1
           AdaptiveModalSnapPointConfig(
@@ -527,6 +606,63 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
           layoutPreset: .fitScreenVertically
         )
       );
+
+      case .demo03: return AdaptiveModalConfig(
+        snapPoints: [
+          // snap point - 1
+          AdaptiveModalSnapPointConfig(
+            snapPoint: RNILayout(
+              horizontalAlignment: .left,
+              verticalAlignment: .center,
+              width: RNILayoutValue(
+                mode: .percent(percentValue: 0.5)
+              ),
+              height: RNILayoutValue(
+                mode: .percent(percentValue: 0.65)
+              ),
+              marginLeft: .constant(15)
+            ),
+            animationKeyframe: AdaptiveModalAnimationConfig(
+              modalScaleX: 1,
+              modalScaleY: 1,
+              backgroundVisualEffect: UIBlurEffect(style: .regular),
+              backgroundVisualEffectIntensity: 0
+            )
+          ),
+          // snap point - 2
+          AdaptiveModalSnapPointConfig(
+            snapPoint: RNILayout(
+              horizontalAlignment: .center,
+              verticalAlignment: .center,
+              width: RNILayoutValue(
+                mode: .stretch
+              ),
+              height: RNILayoutValue(
+                mode: .percent(percentValue: 0.85)
+              ),
+              marginLeft: .constant(20),
+              marginRight: .constant(20)
+            ),
+            animationKeyframe: AdaptiveModalAnimationConfig(
+              backgroundVisualEffect: UIBlurEffect(style: .regular),
+              backgroundVisualEffectIntensity: 0.5
+            )
+          ),
+        ],
+        snapDirection: .leftToRight,
+        undershootSnapPoint: .init(
+          layoutPreset: .offscreenLeft,
+          animationKeyframe: .init(
+            modalScaleX: 0.5,
+            modalScaleY: 0.5,
+            backgroundVisualEffect: UIBlurEffect(style: .regular),
+            backgroundVisualEffectIntensity: 0
+          )
+        ),
+        overshootSnapPoint: AdaptiveModalSnapPointPreset(
+          layoutPreset: .edgeRight
+        )
+      );
     };
   };
 };