diff --git a/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift b/experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalInterpolationPoint.swift index e0db4b77..3023a396 100644 --- 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 index 8beb1676..adedc2fc 100644 --- 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,7 +1343,7 @@ 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; @@ -1356,7 +1351,6 @@ class AdaptiveModalManager: NSObject { ? 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 index 3beef2f6..18b1b052 100644 --- 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 + ) + ); }; }; };