mirror of
https://github.com/webadderallorg/Recordly.git
synced 2026-09-25 23:35:43 +00:00
feat(zoom): tune zoom timing constants
ZOOM_IN_TRANSITION_WINDOW_MS reduced to 0.7x for 800ms delay. CHAINED_ZOOM_PAN_GAP_MS = 1350, CONNECTED_ZOOM_PAN_DURATION_MS = 1000. ZOOM_OUT_EARLY_START_MS = 150.
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
import type { ZoomFocus } from "../types";
|
||||
|
||||
export const DEFAULT_FOCUS: ZoomFocus = { cx: 0.5, cy: 0.5 };
|
||||
export const TRANSITION_WINDOW_MS = 1015.05;
|
||||
export const ZOOM_IN_TRANSITION_WINDOW_MS = TRANSITION_WINDOW_MS * 1.5;
|
||||
export const TRANSITION_WINDOW_MS = 1000;
|
||||
export const ZOOM_IN_TRANSITION_WINDOW_MS = TRANSITION_WINDOW_MS * 0.7;
|
||||
export const ZOOM_OUT_EARLY_START_MS = 150;
|
||||
export const MIN_DELTA = 0.0001;
|
||||
export const VIEWPORT_SCALE = 0.8;
|
||||
export const ZOOM_TRANSLATION_DEADZONE_PX = 1.25;
|
||||
|
||||
@@ -2,11 +2,11 @@ import type { ZoomFocus, ZoomRegion } from "../types";
|
||||
import {
|
||||
ZOOM_DEPTH_SCALES,
|
||||
} from "../types";
|
||||
import { TRANSITION_WINDOW_MS, ZOOM_IN_TRANSITION_WINDOW_MS } from "./constants";
|
||||
import { TRANSITION_WINDOW_MS, ZOOM_IN_TRANSITION_WINDOW_MS, ZOOM_OUT_EARLY_START_MS } from "./constants";
|
||||
import { clampFocusToScale } from "./focusUtils";
|
||||
import { clamp01, cubicBezier, easeOutScreenStudio } from "./mathUtils";
|
||||
import { clamp01, cubicBezier, easeOutZoom } from "./mathUtils";
|
||||
|
||||
const CHAINED_ZOOM_PAN_GAP_MS = 1500;
|
||||
const CHAINED_ZOOM_PAN_GAP_MS = 1350;
|
||||
const CONNECTED_ZOOM_PAN_DURATION_MS = 1000;
|
||||
const ZOOM_IN_OVERLAP_MS = 500;
|
||||
|
||||
@@ -43,7 +43,8 @@ export function computeRegionStrength(
|
||||
) {
|
||||
const zoomInEnd = region.startMs + ZOOM_IN_OVERLAP_MS;
|
||||
const leadInStart = zoomInEnd - ZOOM_IN_TRANSITION_WINDOW_MS;
|
||||
const leadOutEnd = region.endMs + TRANSITION_WINDOW_MS;
|
||||
const zoomOutStart = region.endMs - ZOOM_OUT_EARLY_START_MS;
|
||||
const leadOutEnd = zoomOutStart + TRANSITION_WINDOW_MS;
|
||||
|
||||
if (timeMs < leadInStart || timeMs > leadOutEnd) {
|
||||
return 0;
|
||||
@@ -51,15 +52,15 @@ export function computeRegionStrength(
|
||||
|
||||
if (timeMs < zoomInEnd) {
|
||||
const progress = (timeMs - leadInStart) / ZOOM_IN_TRANSITION_WINDOW_MS;
|
||||
return easeOutScreenStudio(progress);
|
||||
return easeOutZoom(progress);
|
||||
}
|
||||
|
||||
if (timeMs <= region.endMs) {
|
||||
if (timeMs <= zoomOutStart) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
const progress = clamp01((timeMs - region.endMs) / TRANSITION_WINDOW_MS);
|
||||
return 1 - easeOutScreenStudio(progress);
|
||||
const progress = clamp01((timeMs - zoomOutStart) / TRANSITION_WINDOW_MS);
|
||||
return 1 - easeOutZoom(progress);
|
||||
}
|
||||
|
||||
function getLinearFocus(start: ZoomFocus, end: ZoomFocus, amount: number): ZoomFocus {
|
||||
|
||||
Reference in New Issue
Block a user