react-native-screen-transitions 3.9.0-beta.3 → 4.0.0-alpha.0

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

@@ -0,0 +1,319 @@
+import { interpolate } from "react-native-reanimated";
+import {
+	EPSILON,
+	NAVIGATION_MASK_ELEMENT_STYLE_ID,
+} from "../../../../constants";
+import { createBoundsAccessorCore } from "../../helpers/create-bounds-accessor-core";
+import { getSourceBorderRadius } from "../helpers";
+import { resolveRevealContentBaseTransform } from "../reveal/math";
+import {
+	ZOOM_BACKDROP_MAX_OPACITY,
+	ZOOM_BACKGROUND_SCALE,
+	ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE,
+	ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE,
+	ZOOM_SCREEN_A_FADE_END,
+	ZOOM_SHARED_OPTIONS,
+	ZOOM_UNFOCUSED_ELEMENT_CLOSE_OPACITY_RANGE,
+	ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE,
+} from "./config";
+import { resolveZoomDragState, resolveZoomTrackedGestureScale } from "./drag";
+import {
+	resolveZoomBackdropOpacity,
+	resolveZoomPinchFocalOffset,
+	resolveZoomTrackedSourceTransform,
+} from "./helpers";
+import {
+	resolveZoomNavigationMaskStyle,
+	ZOOM_NAVIGATION_MASK_BORDER_RADIUS,
+} from "./mask";
+import {
+	getZoomContentAnchor,
+	getZoomContentTarget,
+	resolveZoomTrackingContentTarget,
+} from "./targets";
+import type { BuildZoomStylesParams, ZoomInterpolatedStyle } from "./types";
+
+export function buildZoomStyles({
+	tag,
+	props,
+	zoomOptions,
+}: BuildZoomStylesParams): ZoomInterpolatedStyle {
+	"worklet";
+
+	if (!tag) {
+		return {};
+	}
+
+	const target = zoomOptions?.target;
+	const keepFocusedVisible = zoomOptions?.keepFocusedVisible === true;
+	const expandedBorderRadius = Math.max(
+		0,
+		zoomOptions?.borderRadius ?? ZOOM_NAVIGATION_MASK_BORDER_RADIUS,
+	);
+	const backgroundScale = zoomOptions?.backgroundScale ?? ZOOM_BACKGROUND_SCALE;
+	const backdropColor = zoomOptions?.backdropColor ?? "black";
+	const maxBackdropOpacity =
+		zoomOptions?.backdropOpacity ?? ZOOM_BACKDROP_MAX_OPACITY;
+
+	const {
+		active,
+		current,
+		focused,
+		transitionProgress,
+		layouts: { screen: screenLayout },
+	} = props;
+
+	const activeTransitionProgress = active.transitionProgress;
+
+	const bounds = createBoundsAccessorCore({
+		getProps: () => props,
+	});
+
+	const scopedBounds = bounds(tag);
+	const link = scopedBounds.link();
+	const sourceBounds = link?.source?.bounds;
+
+	if (!link || !sourceBounds) {
+		if (target !== "bound") {
+			scopedBounds.values({
+				scaleMode: ZOOM_SHARED_OPTIONS.scaleMode,
+				anchor: ZOOM_SHARED_OPTIONS.anchor,
+				method: "content",
+				target: target ?? "fullscreen",
+				progress: transitionProgress,
+			});
+		}
+
+		return {};
+	}
+
+	const zoomContentTarget = getZoomContentTarget({
+		explicitTarget: target,
+		screenLayout,
+		link,
+	});
+	const zoomContentAnchor = getZoomContentAnchor({
+		explicitTarget: target,
+		screenLayout,
+		link,
+	});
+	const trackingContentTarget = resolveZoomTrackingContentTarget({
+		contentTarget: zoomContentTarget,
+		link,
+		screenLayout,
+	});
+
+	if (!trackingContentTarget) {
+		return {};
+	}
+
+	const drag = resolveZoomDragState({
+		gesture: active.gesture,
+		activeTransitionProgress,
+		screenLayout,
+		sourceBounds,
+		trackingContentTarget,
+		dragOptions: zoomOptions?.drag,
+	});
+
+	const trackedGestureScale = resolveZoomTrackedGestureScale({
+		drag,
+		activeTransitionProgress,
+		screenLayout,
+		sourceBounds,
+		trackingContentTarget,
+	});
+
+	const focalGesture = drag.isDismissing
+		? active.gesture.handoff
+		: active.gesture;
+
+	const focalProgress = drag.isDismissing ? activeTransitionProgress : 1;
+	const pinchFocalOffset =
+		active.gesture.handoff.active === "pinch-in"
+			? resolveZoomPinchFocalOffset({
+					gestureScale: drag.isDismissing
+						? focalGesture.scale
+						: trackedGestureScale,
+					pinchOriginX: focalGesture.pinchOriginX,
+					pinchOriginY: focalGesture.pinchOriginY,
+					progress: focalProgress,
+					rotation: drag.isDismissing ? focalGesture.rotation : drag.rotation,
+					screenLayout,
+				})
+			: { x: 0, y: 0 };
+
+	if (focused) {
+		const sourceBorderRadius = getSourceBorderRadius(link);
+		const navigationMaskEnabled = current.options.navigationMaskEnabled;
+		const backdropOpacity = resolveZoomBackdropOpacity({
+			transitionProgress,
+			dismissalDrag: drag.dismissNorm,
+			fadeEnd: ZOOM_SCREEN_A_FADE_END,
+			maxOpacity: maxBackdropOpacity,
+		});
+
+		const contentRaw = scopedBounds.values({
+			scaleMode: ZOOM_SHARED_OPTIONS.scaleMode,
+			anchor: zoomContentAnchor,
+			method: "content",
+			target: zoomContentTarget,
+			progress: transitionProgress,
+		});
+
+		const focusedOpacityRange = active.closing
+			? ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE
+			: ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE;
+
+		const focusedFade = interpolate(
+			transitionProgress,
+			[focusedOpacityRange[0], focusedOpacityRange[1]],
+			[focusedOpacityRange[2], focusedOpacityRange[3]],
+			"clamp",
+		);
+
+		const contentBaseTranslateX = contentRaw.translateX;
+		const contentBaseTranslateY = contentRaw.translateY;
+		const contentBaseScale = contentRaw.scale;
+
+		const contentTranslateX =
+			contentBaseTranslateX +
+			drag.dragX +
+			pinchFocalOffset.x * contentBaseScale;
+		const contentTranslateY =
+			contentBaseTranslateY +
+			drag.dragY +
+			pinchFocalOffset.y * contentBaseScale;
+		const contentScale = drag.isDismissing
+			? drag.dismissContentScale
+			: contentBaseScale * drag.gestureScale;
+
+		return {
+			options: {
+				gestureReleaseVelocityScale: 0.5,
+			},
+			backdrop: {
+				style: {
+					backgroundColor: backdropColor,
+					opacity: backdropOpacity,
+				},
+			},
+			content: {
+				style: {
+					...(keepFocusedVisible ? {} : { opacity: focusedFade }),
+					transform: [
+						{ translateX: contentTranslateX },
+						{ translateY: contentTranslateY },
+						{ scale: contentScale },
+						{ rotateZ: `${drag.rotation}rad` },
+					],
+					borderRadius: interpolate(
+						transitionProgress,
+						[0, 1],
+						[sourceBorderRadius, active.animating ? expandedBorderRadius : 0],
+						"clamp",
+					),
+					overflow: "hidden" as const,
+				},
+			},
+			[NAVIGATION_MASK_ELEMENT_STYLE_ID]: navigationMaskEnabled
+				? resolveZoomNavigationMaskStyle({
+						scopedBounds,
+						link,
+						sourceBounds,
+						screenLayout,
+						transitionProgress,
+						drag,
+						contentTransform: contentRaw,
+						sourceBorderRadius,
+						expandedBorderRadius,
+						active,
+						anchor: zoomContentAnchor,
+					})
+				: {},
+		};
+	}
+
+	const unfocusedOpacityRange = active.closing
+		? ZOOM_UNFOCUSED_ELEMENT_CLOSE_OPACITY_RANGE
+		: ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE;
+	const unfocusedFade = interpolate(
+		transitionProgress,
+		[unfocusedOpacityRange[0], unfocusedOpacityRange[1]],
+		[unfocusedOpacityRange[2], unfocusedOpacityRange[3]],
+		"clamp",
+	);
+	const unfocusedScale = interpolate(
+		transitionProgress,
+		[1, 2],
+		[1, backgroundScale],
+		"clamp",
+	);
+
+	const shouldHideSource = !active.closing && unfocusedFade <= EPSILON;
+	const unfocusedContentScale = active.settled ? 1 : unfocusedScale;
+	const unfocusedContent = {
+		style: {
+			transform: [{ scale: unfocusedContentScale }],
+		},
+	};
+
+	// To avoid measuring a component from a bad position,
+	// we'll want to hide + reset this component when the animation has reached a visual settling point
+	if (shouldHideSource || active.settled) {
+		return {
+			content: unfocusedContent,
+			[link.id]: {
+				style: {
+					transform: [
+						{ translateX: 0 },
+						{ translateY: 0 },
+						{ scaleX: 1 },
+						{ scaleY: 1 },
+					],
+					opacity: shouldHideSource ? 0 : unfocusedFade,
+				},
+			},
+		};
+	}
+
+	const trackedContentBaseScale = resolveRevealContentBaseTransform({
+		progress: activeTransitionProgress,
+		sourceBounds,
+		destinationBounds: trackingContentTarget,
+		screenLayout,
+	}).scale;
+	const trackedDragX =
+		drag.dragX + pinchFocalOffset.x * trackedContentBaseScale;
+	const trackedDragY =
+		drag.dragY + pinchFocalOffset.y * trackedContentBaseScale;
+
+	const trackedSourceElement = resolveZoomTrackedSourceTransform({
+		progress: activeTransitionProgress,
+		sourceBounds,
+		destinationBounds: trackingContentTarget,
+		screenLayout,
+		dragX: trackedDragX,
+		dragY: trackedDragY,
+		gestureScale: trackedGestureScale,
+		parentScale: unfocusedContentScale,
+		rotation: drag.rotation,
+		anchor: zoomContentAnchor,
+	});
+
+	return {
+		content: unfocusedContent,
+		[link.id]: {
+			style: {
+				transform: [
+					{ translateX: trackedSourceElement.translateX },
+					{ translateY: trackedSourceElement.translateY },
+					{ rotateZ: `${drag.rotation}rad` },
+					{ scaleX: trackedSourceElement.scaleX },
+					{ scaleY: trackedSourceElement.scaleY },
+				],
+				opacity: unfocusedFade,
+			},
+		},
+	};
+}

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

@@ -0,0 +1,24 @@
+export const ZOOM_SHARED_OPTIONS = Object.freeze({
+	anchor: "top" as const,
+	scaleMode: "uniform" as const,
+});
+
+export const ZOOM_DISMISS_VELOCITY_DEPTH = 1.0;
+export const ZOOM_BACKGROUND_SCALE = 0.9375;
+// Keep the previous screen visible beneath the zoom instead of reaching black.
+export const ZOOM_BACKDROP_MAX_OPACITY = 0.45;
+// Geometry-aligned native frames reach their darkest point around here.
+export const ZOOM_SCREEN_A_FADE_END = 0.54;
+// Native starts revealing the destination immediately while the source begins
+// handing ownership over in the first tenth of the opening travel.
+export const ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [0, 0.28, 0, 1] as const;
+export const ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [
+	1.08, 1.32, 1, 0,
+] as const;
+// On close, red is prepared behind opaque blue before blue fades away.
+export const ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [
+	0.13, 0.7, 0, 1,
+] as const;
+export const ZOOM_UNFOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [
+	1.7, 2, 1, 0,
+] as const;

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

@@ -0,0 +1,155 @@
+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";
+
+export function resolveZoomBackdropOpacity({
+	transitionProgress,
+	dismissalDrag,
+	fadeEnd,
+	maxOpacity,
+}: {
+	transitionProgress: number;
+	dismissalDrag: number;
+	fadeEnd: number;
+	maxOpacity: number;
+}) {
+	"worklet";
+
+	const clampedProgress = Math.min(1, Math.max(0, transitionProgress));
+	const clampedDrag = Math.min(1, Math.max(0, dismissalDrag));
+	const safeFadeEnd = Math.max(EPSILON, fadeEnd);
+	const transitionOpacity = Math.min(1, clampedProgress / safeFadeEnd);
+	const clampedMaxOpacity = Math.min(1, Math.max(0, maxOpacity));
+
+	return clampedMaxOpacity * transitionOpacity * (1 - clampedDrag);
+}
+
+export function resolveZoomPinchFocalOffset({
+	gestureScale,
+	pinchOriginX,
+	pinchOriginY,
+	progress,
+	rotation,
+	screenLayout,
+}: {
+	gestureScale: number;
+	pinchOriginX: number;
+	pinchOriginY: number;
+	progress: number;
+	rotation: number;
+	screenLayout: Layout;
+}) {
+	"worklet";
+
+	if (Math.abs(gestureScale - 1) <= EPSILON && Math.abs(rotation) <= EPSILON) {
+		return { x: 0, y: 0 };
+	}
+
+	const offsetX = pinchOriginX - screenLayout.width / 2;
+	const offsetY = pinchOriginY - screenLayout.height / 2;
+	const cosine = Math.cos(rotation);
+	const sine = Math.sin(rotation);
+	const transformedOffsetX = gestureScale * (offsetX * cosine - offsetY * sine);
+	const transformedOffsetY = gestureScale * (offsetX * sine + offsetY * cosine);
+	const clampedProgress = Math.min(1, Math.max(0, progress));
+
+	return {
+		x: (offsetX - transformedOffsetX) * clampedProgress,
+		y: (offsetY - transformedOffsetY) * clampedProgress,
+	};
+}
+
+export function resolveZoomTrackedSourceTransform({
+	progress,
+	sourceBounds,
+	destinationBounds,
+	screenLayout,
+	dragX,
+	dragY,
+	gestureScale,
+	parentScale,
+	rotation = 0,
+	anchor,
+}: {
+	progress: number;
+	sourceBounds: MeasuredDimensions;
+	destinationBounds: MeasuredDimensions;
+	screenLayout: Layout;
+	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),
+		EPSILON,
+	);
+	const safeParentScale = Math.max(Math.abs(parentScale), EPSILON);
+	const uniformSourceScale =
+		contentScale / (safeCollapsedContentScale * safeParentScale);
+	const trackedTransform = {
+		...resolveTrackedSourceElementTransform({
+			sourceBounds,
+			destinationBounds,
+			contentTranslateX: contentBaseTransform.translateX + dragX,
+			contentTranslateY: contentBaseTransform.translateY + dragY,
+			contentScale,
+			parentScale,
+			screenWidth: screenLayout.width,
+			screenHeight: screenLayout.height,
+		}),
+		scaleX: uniformSourceScale,
+		scaleY: uniformSourceScale,
+	};
+
+	if (Math.abs(rotation) <= EPSILON) {
+		return trackedTransform;
+	}
+
+	const screenCenterX = screenLayout.width / 2;
+	const screenCenterY = screenLayout.height / 2;
+	const destinationCenterX =
+		destinationBounds.pageX + destinationBounds.width / 2;
+	const destinationCenterY =
+		destinationBounds.pageY + destinationBounds.height / 2;
+	const scaledOffsetX = (destinationCenterX - screenCenterX) * contentScale;
+	const scaledOffsetY = (destinationCenterY - screenCenterY) * contentScale;
+	const cosine = Math.cos(rotation);
+	const sine = Math.sin(rotation);
+	const rotatedOffsetX = scaledOffsetX * cosine - scaledOffsetY * sine;
+	const rotatedOffsetY = scaledOffsetX * sine + scaledOffsetY * cosine;
+
+	return {
+		...trackedTransform,
+		translateX:
+			trackedTransform.translateX +
+			(rotatedOffsetX - scaledOffsetX) / safeParentScale,
+		translateY:
+			trackedTransform.translateY +
+			(rotatedOffsetY - scaledOffsetY) / safeParentScale,
+	};
+}

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

@@ -0,0 +1,133 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+import { interpolate } from "react-native-reanimated";
+import type {
+	ScreenTransitionState,
+	TransitionSlotStyle,
+} from "../../../../types/animation.types";
+import type {
+	BoundsLink,
+	BoundsScopedAccessor,
+} from "../../../../types/bounds.types";
+import type { Layout } from "../../../../types/screen.types";
+import type { BoundsAnchor } from "../../types/options";
+import { toNumber } from "../helpers";
+import { DRAG_MASK_HEIGHT_COLLAPSE_END } from "../reveal/config";
+import {
+	interpolateClamped,
+	resolveAspectRatioMaskHeight,
+} from "../reveal/math";
+import { ZOOM_SHARED_OPTIONS } from "./config";
+import type { ZoomDragState } from "./drag";
+
+export const ZOOM_NAVIGATION_MASK_BORDER_RADIUS = 64;
+const ZOOM_VERTICAL_DRAG_MASK_COLLAPSE_SCALE = 0.8;
+
+interface ZoomNavigationMaskStyleProps {
+	scopedBounds: BoundsScopedAccessor;
+	link: BoundsLink;
+	sourceBounds: MeasuredDimensions;
+	screenLayout: Layout;
+	transitionProgress: number;
+	drag: ZoomDragState;
+	contentTransform: {
+		translateX: number;
+		translateY: number;
+		scale: number;
+	};
+	sourceBorderRadius: number;
+	expandedBorderRadius: number;
+	active: ScreenTransitionState;
+	anchor: BoundsAnchor;
+}
+
+export function resolveZoomNavigationMaskStyle({
+	scopedBounds,
+	link,
+	sourceBounds,
+	screenLayout,
+	transitionProgress,
+	drag,
+	contentTransform,
+	sourceBorderRadius,
+	expandedBorderRadius,
+	active,
+	anchor,
+}: ZoomNavigationMaskStyleProps): TransitionSlotStyle {
+	"worklet";
+
+	const maskRaw = scopedBounds.values({
+		scaleMode: ZOOM_SHARED_OPTIONS.scaleMode,
+		anchor,
+		method: "size",
+		space: "absolute",
+		target: "fullscreen",
+		progress: transitionProgress,
+	});
+	const maskWidth = maskRaw.width;
+	const maskHeight = maskRaw.height;
+	const maskAspectBounds = link.initialSource?.bounds ?? sourceBounds;
+	const minMaskHeight = resolveAspectRatioMaskHeight({
+		maskWidth,
+		maskHeight,
+		targetWidth: maskAspectBounds.width,
+		targetHeight: maskAspectBounds.height,
+	});
+	const maskHeightCollapseDrag = drag.collapsesMask
+		? Math.max(
+				0,
+				drag.dismissNorm * ZOOM_VERTICAL_DRAG_MASK_COLLAPSE_SCALE,
+				drag.dismissProgress,
+			)
+		: 0;
+	const renderedMaskHeight = interpolateClamped(
+		maskHeightCollapseDrag,
+		0,
+		DRAG_MASK_HEIGHT_COLLAPSE_END,
+		maskHeight,
+		minMaskHeight,
+	);
+	const maskCenterX = maskWidth / 2;
+	const maskCenterY = renderedMaskHeight / 2;
+	const contentCenterX = screenLayout.width / 2;
+	const contentCenterY = screenLayout.height / 2;
+	const maskOriginOffsetY = drag.isVerticalInverted
+		? maskHeight - renderedMaskHeight
+		: 0;
+	const compensatedMaskTranslateX =
+		(maskRaw.translateX -
+			contentTransform.translateX +
+			(1 - contentTransform.scale) * (maskCenterX - contentCenterX)) /
+		contentTransform.scale;
+	const compensatedMaskTranslateY =
+		(maskRaw.translateY -
+			contentTransform.translateY +
+			maskOriginOffsetY +
+			(1 - contentTransform.scale) * (maskCenterY - contentCenterY)) /
+		contentTransform.scale;
+	const initialSourceBorderRadius = toNumber(
+		link.initialSource?.styles.borderRadius,
+		sourceBorderRadius,
+	);
+
+	return {
+		style: {
+			width: maskWidth,
+			height: renderedMaskHeight,
+			borderRadius: interpolate(
+				transitionProgress,
+				[0, 1],
+				[
+					initialSourceBorderRadius,
+					active.animating ? expandedBorderRadius : 0,
+				],
+				"clamp",
+			),
+			borderCurve: "continuous",
+			transform: [
+				{ translateX: compensatedMaskTranslateX },
+				{ translateY: compensatedMaskTranslateY },
+				{ scale: 1 / contentTransform.scale },
+			],
+		},
+	};
+}