react-native-screen-transitions 4.0.0-alpha.1 → 4.0.0-alpha.3

package/src/utils/animation/spring/springUtils.ts

@@ -29,6 +29,8 @@ export interface SpringAnimation extends Animation<SpringAnimation> {
 	omega0: number;
 	omega1: number;
 	initialEnergy: number;
+	animationProgressElapsed: number;
+	animationProgressDuration: number;
 }
 
 export type InnerSpringAnimation = SpringAnimation;
@@ -362,6 +364,134 @@ export function underDampedSpringCalculations(
 	return { position: underDampedPosition, velocity: underDampedVelocity };
 }
 
+const MAX_SPRING_DURATION_SECONDS = 60;
+const SPRING_DURATION_PRECISION_SECONDS = 0.0001;
+const MAX_OVERSHOOT_DURATION_SAMPLES = 4096;
+
+export function calculateSpringAnimationDuration(
+	animation: InnerSpringAnimation,
+	config: DefaultSpringConfig & SpringConfigInner,
+): number {
+	"worklet";
+	const startPosition = animation.current;
+	const startVelocity = animation.velocity;
+	const x0 = startPosition - animation.toValue;
+
+	const stateAt = (time: number) => {
+		"worklet";
+		return animation.zeta < 1
+			? underDampedSpringCalculations(animation, {
+					zeta: animation.zeta,
+					v0: startVelocity,
+					x0,
+					omega0: animation.omega0,
+					omega1: animation.omega1,
+					t: time,
+				})
+			: criticallyDampedSpringCalculations(animation, {
+					v0: startVelocity,
+					x0,
+					omega0: animation.omega0,
+					t: time,
+				});
+	};
+
+	const terminatesByEnergyAt = (time: number) => {
+		"worklet";
+		if (animation.initialEnergy === 0) {
+			return true;
+		}
+
+		const state = stateAt(time);
+		const energy = getEnergy(
+			animation.toValue - state.position,
+			state.velocity,
+			config.stiffness,
+			config.mass,
+		);
+
+		return energy / animation.initialEnergy <= config.energyThreshold;
+	};
+
+	if (terminatesByEnergyAt(0)) {
+		return 0;
+	}
+
+	let lowerBound = 0;
+	let upperBound = 1 / 60;
+	while (
+		upperBound < MAX_SPRING_DURATION_SECONDS &&
+		!terminatesByEnergyAt(upperBound)
+	) {
+		lowerBound = upperBound;
+		upperBound *= 2;
+	}
+	upperBound = Math.min(upperBound, MAX_SPRING_DURATION_SECONDS);
+
+	if (terminatesByEnergyAt(upperBound)) {
+		while (upperBound - lowerBound > SPRING_DURATION_PRECISION_SECONDS) {
+			const midpoint = (lowerBound + upperBound) / 2;
+			if (terminatesByEnergyAt(midpoint)) {
+				upperBound = midpoint;
+			} else {
+				lowerBound = midpoint;
+			}
+		}
+	}
+
+	const energyDuration = upperBound;
+	if (!config.overshootClamping || energyDuration === 0) {
+		return energyDuration * 1000;
+	}
+
+	const leftBound =
+		animation.startValue >= 0
+			? animation.toValue
+			: animation.toValue + animation.startValue;
+	const rightBound = leftBound + Math.abs(animation.startValue);
+	const isOutsideBoundsAt = (time: number) => {
+		"worklet";
+		const { position } = stateAt(time);
+		return position < leftBound || position > rightBound;
+	};
+
+	const frequency = animation.zeta < 1 ? animation.omega1 : animation.omega0;
+	const sampleStep =
+		frequency > 0 ? Math.min(1 / 240, Math.PI / (frequency * 8)) : 1 / 240;
+	const sampleCount = Math.min(
+		MAX_OVERSHOOT_DURATION_SAMPLES,
+		Math.max(1, Math.ceil(energyDuration / sampleStep)),
+	);
+	const effectiveStep = energyDuration / sampleCount;
+	let previousTime = 0;
+
+	for (let index = 1; index <= sampleCount; index += 1) {
+		const time = effectiveStep * index;
+		if (!isOutsideBoundsAt(time)) {
+			previousTime = time;
+			continue;
+		}
+
+		let crossingLowerBound = previousTime;
+		let crossingUpperBound = time;
+		while (
+			crossingUpperBound - crossingLowerBound >
+			SPRING_DURATION_PRECISION_SECONDS
+		) {
+			const midpoint = (crossingLowerBound + crossingUpperBound) / 2;
+			if (isOutsideBoundsAt(midpoint)) {
+				crossingUpperBound = midpoint;
+			} else {
+				crossingLowerBound = midpoint;
+			}
+		}
+
+		return crossingUpperBound * 1000;
+	}
+
+	return energyDuration * 1000;
+}
+
 export function isAnimationTerminatingCalculation(
 	animation: InnerSpringAnimation,
 	config: DefaultSpringConfig & SpringConfigInner,

package/src/utils/animation/state.ts

@@ -1,6 +1,14 @@
+import type { SharedValue } from "react-native-reanimated";
+
 export type AnimationState = {
 	finished: boolean;
 	settled: boolean;
 };
 
 export type AnimationStateCallback = (state: AnimationState) => void;
+
+export type AnimationProgressDriver = {
+	value: SharedValue<number>;
+	from: number;
+	to: number;
+};

package/src/utils/bounds/helpers/create-bounds-accessor-core.ts

@@ -1,3 +1,4 @@
+import { NO_STYLES } from "../../../constants";
 import type {
 	BoundsAccessor,
 	BoundsInterpolationProps,
@@ -64,6 +65,12 @@ const createBoundsAccessorParts = ({
 		const scoped: BoundsScopedAccessor = {
 			styles: (options?: BoundsComputeOptions): BoundsStyleResult => {
 				"worklet";
+				// Keep the component at its base layout for pre-animation refresh
+				// measurement, then remove generated styles again after settlement.
+				if (!props.active.animating) {
+					return NO_STYLES;
+				}
+
 				return prepareBoundStyles({
 					props,
 					options: {

package/src/utils/bounds/navigation/reveal/math.ts

@@ -2,6 +2,7 @@ import type { MeasuredDimensions } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
 import type { Layout } from "../../../../types/screen.types";
 import { computeContentTransformGeometry } from "../../helpers/geometry";
+import type { ContentTransformGeometry } from "../../types/geometry";
 import type { BoundsAnchor } from "../../types/options";
 import {
 	DRAG_DIRECTIONAL_SCALE_EXPONENT,
@@ -185,6 +186,22 @@ function getBoundsCenterY(bounds: MeasuredDimensions) {
 	return bounds.pageY + bounds.height / 2;
 }
 
+export function resolveRevealContentBaseTransformFromGeometry({
+	progress,
+	geometry,
+}: {
+	progress: number;
+	geometry: ContentTransformGeometry;
+}) {
+	"worklet";
+
+	return {
+		translateX: mixUnit(geometry.tx, 0, progress),
+		translateY: mixUnit(geometry.ty, 0, progress),
+		scale: mixUnit(geometry.s, 1, progress),
+	};
+}
+
 export function resolveRevealContentBaseTransform({
 	progress,
 	sourceBounds,
@@ -209,11 +226,10 @@ export function resolveRevealContentBaseTransform({
 		scaleMode: "uniform",
 	});
 
-	return {
-		translateX: mixUnit(geometry.tx, 0, progress),
-		translateY: mixUnit(geometry.ty, 0, progress),
-		scale: mixUnit(geometry.s, 1, progress),
-	};
+	return resolveRevealContentBaseTransformFromGeometry({
+		geometry,
+		progress,
+	});
 }
 
 export function resolveTrackedSourceElementTransform({

package/src/utils/bounds/navigation/zoom/build.ts

@@ -3,9 +3,12 @@ import {
 	EPSILON,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 } from "../../../../constants";
+import { getVisualScrollAxisDelta } from "../../../../stores/scroll.store";
+import type { ScrollMetadataState } from "../../../../types/gesture.types";
 import { createBoundsAccessorCore } from "../../helpers/create-bounds-accessor-core";
+import { computeContentTransformGeometry } from "../../helpers/geometry";
 import { getSourceBorderRadius } from "../helpers";
-import { resolveRevealContentBaseTransform } from "../reveal/math";
+import { resolveRevealContentBaseTransformFromGeometry } from "../reveal/math";
 import {
 	ZOOM_BACKDROP_MAX_OPACITY,
 	ZOOM_BACKGROUND_SCALE,
@@ -16,7 +19,7 @@ import {
 	ZOOM_UNFOCUSED_ELEMENT_CLOSE_OPACITY_RANGE,
 	ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE,
 } from "./config";
-import { resolveZoomDragState, resolveZoomTrackedGestureScale } from "./drag";
+import { resolveZoomDragState } from "./drag";
 import {
 	resolveZoomBackdropOpacity,
 	resolveZoomPinchFocalOffset,
@@ -107,23 +110,31 @@ export function buildZoomStyles({
 		return {};
 	}
 
+	const isDismissing = active.gesture.dismissing === 1;
+	const dismissalTrackingGeometry = isDismissing
+		? computeContentTransformGeometry({
+				start: sourceBounds,
+				end: trackingContentTarget,
+				entering: true,
+				dimensions: screenLayout,
+				anchor: zoomContentAnchor,
+				scaleMode: "uniform",
+			})
+		: null;
+	const dismissalCollapsedContentScale = dismissalTrackingGeometry
+		? resolveRevealContentBaseTransformFromGeometry({
+				geometry: dismissalTrackingGeometry,
+				progress: 0,
+			}).scale
+		: 1;
 	const drag = resolveZoomDragState({
 		gesture: active.gesture,
 		activeTransitionProgress,
 		screenLayout,
-		sourceBounds,
-		trackingContentTarget,
+		collapsedContentScale: dismissalCollapsedContentScale,
 		dragOptions: zoomOptions?.drag,
 	});
 
-	const trackedGestureScale = resolveZoomTrackedGestureScale({
-		drag,
-		activeTransitionProgress,
-		screenLayout,
-		sourceBounds,
-		trackingContentTarget,
-	});
-
 	const focalGesture = drag.isDismissing
 		? active.gesture.handoff
 		: active.gesture;
@@ -134,7 +145,7 @@ export function buildZoomStyles({
 			? resolveZoomPinchFocalOffset({
 					gestureScale: drag.isDismissing
 						? focalGesture.scale
-						: trackedGestureScale,
+						: drag.gestureScale,
 					pinchOriginX: focalGesture.pinchOriginX,
 					pinchOriginY: focalGesture.pinchOriginY,
 					progress: focalProgress,
@@ -144,6 +155,28 @@ export function buildZoomStyles({
 			: { x: 0, y: 0 };
 
 	if (focused) {
+		const capturedSourceScroll = (
+			sourceBounds as typeof sourceBounds & {
+				scroll?: ScrollMetadataState | null;
+			}
+		).scroll;
+		const liveSourceScroll = props.inactive?.layouts.scroll;
+		const sourceScrollWeight =
+			keepFocusedVisible && (active.entering || active.closing)
+				? 1 - Math.min(Math.max(activeTransitionProgress, 0), 1)
+				: 0;
+		const sourceScrollDeltaX =
+			getVisualScrollAxisDelta(
+				liveSourceScroll,
+				capturedSourceScroll,
+				"horizontal",
+			) * sourceScrollWeight;
+		const sourceScrollDeltaY =
+			getVisualScrollAxisDelta(
+				liveSourceScroll,
+				capturedSourceScroll,
+				"vertical",
+			) * sourceScrollWeight;
 		const sourceBorderRadius = getSourceBorderRadius(link);
 		const navigationMaskEnabled = current.options.navigationMaskEnabled;
 		const backdropOpacity = resolveZoomBackdropOpacity({
@@ -179,11 +212,13 @@ export function buildZoomStyles({
 		const contentTranslateX =
 			contentBaseTranslateX +
 			drag.dragX +
-			pinchFocalOffset.x * contentBaseScale;
+			pinchFocalOffset.x * contentBaseScale -
+			sourceScrollDeltaX;
 		const contentTranslateY =
 			contentBaseTranslateY +
 			drag.dragY +
-			pinchFocalOffset.y * contentBaseScale;
+			pinchFocalOffset.y * contentBaseScale -
+			sourceScrollDeltaY;
 		const contentScale = drag.isDismissing
 			? drag.dismissContentScale
 			: contentBaseScale * drag.gestureScale;
@@ -277,19 +312,39 @@ export function buildZoomStyles({
 		};
 	}
 
-	const trackedContentBaseScale = resolveRevealContentBaseTransform({
-		progress: activeTransitionProgress,
-		sourceBounds,
-		destinationBounds: trackingContentTarget,
-		screenLayout,
-	}).scale;
+	const trackingGeometry =
+		dismissalTrackingGeometry ??
+		computeContentTransformGeometry({
+			start: sourceBounds,
+			end: trackingContentTarget,
+			entering: true,
+			dimensions: screenLayout,
+			anchor: zoomContentAnchor,
+			scaleMode: "uniform",
+		});
+	const trackedContentBaseTransform =
+		resolveRevealContentBaseTransformFromGeometry({
+			geometry: trackingGeometry,
+			progress: activeTransitionProgress,
+		});
+	const collapsedContentScale = drag.isDismissing
+		? dismissalCollapsedContentScale
+		: resolveRevealContentBaseTransformFromGeometry({
+				geometry: trackingGeometry,
+				progress: 0,
+			}).scale;
+	const trackedGestureScale = drag.isDismissing
+		? drag.dismissContentScale / trackedContentBaseTransform.scale
+		: drag.gestureScale;
+	const trackedContentBaseScale = trackedContentBaseTransform.scale;
 	const trackedDragX =
 		drag.dragX + pinchFocalOffset.x * trackedContentBaseScale;
 	const trackedDragY =
 		drag.dragY + pinchFocalOffset.y * trackedContentBaseScale;
 
 	const trackedSourceElement = resolveZoomTrackedSourceTransform({
-		progress: activeTransitionProgress,
+		contentBaseTransform: trackedContentBaseTransform,
+		collapsedContentScale,
 		sourceBounds,
 		destinationBounds: trackingContentTarget,
 		screenLayout,
@@ -298,7 +353,6 @@ export function buildZoomStyles({
 		gestureScale: trackedGestureScale,
 		parentScale: unfocusedContentScale,
 		rotation: drag.rotation,
-		anchor: zoomContentAnchor,
 	});
 
 	return {

package/src/utils/bounds/navigation/zoom/drag.ts

@@ -1,11 +1,9 @@
-import type { MeasuredDimensions } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
 import type {
 	BoundsInterpolationProps,
 	BoundsNavigationZoomDragOptions,
 } from "../../../../types/bounds.types";
 import type { Layout } from "../../../../types/screen.types";
-import { resolveRevealContentBaseTransform } from "../reveal/math";
 import { ZOOM_DISMISS_VELOCITY_DEPTH } from "./config";
 
 const ZOOM_DRAG_SCALE_EXPONENT = 2;
@@ -169,15 +167,13 @@ export function resolveZoomDragState({
 	gesture,
 	activeTransitionProgress,
 	screenLayout,
-	sourceBounds,
-	trackingContentTarget,
+	collapsedContentScale,
 	dragOptions,
 }: {
 	gesture: ZoomGesture;
 	activeTransitionProgress: number;
 	screenLayout: Layout;
-	sourceBounds: MeasuredDimensions;
-	trackingContentTarget: MeasuredDimensions;
+	collapsedContentScale: number;
 	dragOptions?: BoundsNavigationZoomDragOptions;
 }): ZoomDragState {
 	"worklet";
@@ -266,16 +262,10 @@ export function resolveZoomDragState({
 	let dismissContentScale = gestureScale;
 
 	if (isDismissing) {
-		const targetContentScale = resolveRevealContentBaseTransform({
-			progress: 0,
-			sourceBounds,
-			destinationBounds: trackingContentTarget,
-			screenLayout,
-		}).scale;
 		dismissContentScale = resolveZoomDismissContentScale({
 			transitionRemaining: activeTransitionProgress,
 			releaseScale: gestureScale,
-			targetScale: targetContentScale,
+			targetScale: collapsedContentScale,
 			velocity: gestureHandoff.velocity,
 			velocityDepth:
 				ZOOM_DISMISS_VELOCITY_DEPTH *
@@ -296,32 +286,3 @@ export function resolveZoomDragState({
 		rotation,
 	};
 }
-
-export function resolveZoomTrackedGestureScale({
-	drag,
-	activeTransitionProgress,
-	screenLayout,
-	sourceBounds,
-	trackingContentTarget,
-}: {
-	drag: ZoomDragState;
-	activeTransitionProgress: number;
-	screenLayout: Layout;
-	sourceBounds: MeasuredDimensions;
-	trackingContentTarget: MeasuredDimensions;
-}) {
-	"worklet";
-
-	if (!drag.isDismissing) {
-		return drag.gestureScale;
-	}
-
-	const trackedContentBaseScale = resolveRevealContentBaseTransform({
-		progress: activeTransitionProgress,
-		sourceBounds,
-		destinationBounds: trackingContentTarget,
-		screenLayout,
-	}).scale;
-
-	return drag.dismissContentScale / trackedContentBaseScale;
-}

package/src/utils/bounds/navigation/zoom/helpers.ts

@@ -1,11 +1,7 @@
 import type { MeasuredDimensions } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
 import type { Layout } from "../../../../types/screen.types";
-import type { BoundsAnchor } from "../../types/options";
-import {
-	resolveRevealContentBaseTransform,
-	resolveTrackedSourceElementTransform,
-} from "../reveal/math";
+import { resolveTrackedSourceElementTransform } from "../reveal/math";
 
 export function resolveZoomBackdropOpacity({
 	transitionProgress,
@@ -65,44 +61,34 @@ export function resolveZoomPinchFocalOffset({
 }
 
 export function resolveZoomTrackedSourceTransform({
-	progress,
 	sourceBounds,
 	destinationBounds,
 	screenLayout,
+	contentBaseTransform,
+	collapsedContentScale,
 	dragX,
 	dragY,
 	gestureScale,
 	parentScale,
 	rotation = 0,
-	anchor,
 }: {
-	progress: number;
 	sourceBounds: MeasuredDimensions;
 	destinationBounds: MeasuredDimensions;
 	screenLayout: Layout;
+	contentBaseTransform: {
+		translateX: number;
+		translateY: number;
+		scale: number;
+	};
+	collapsedContentScale: number;
 	dragX: number;
 	dragY: number;
 	gestureScale: number;
 	parentScale: number;
 	rotation?: number;
-	anchor?: BoundsAnchor;
 }) {
 	"worklet";
 
-	const contentBaseTransform = resolveRevealContentBaseTransform({
-		progress,
-		sourceBounds,
-		destinationBounds,
-		screenLayout,
-		anchor,
-	});
-	const collapsedContentScale = resolveRevealContentBaseTransform({
-		progress: 0,
-		sourceBounds,
-		destinationBounds,
-		screenLayout,
-		anchor,
-	}).scale;
 	const contentScale = contentBaseTransform.scale * gestureScale;
 	const safeCollapsedContentScale = Math.max(
 		Math.abs(collapsedContentScale),