lee/Recordly
1
0
Fork 0
mirror of https://github.com/webadderallorg/Recordly.git synced 2026-09-24 06:46:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Delay current zoom animation timing by 300ms

Browse Source
This commit is contained in:
webadderall
2026-09-23 12:17:04 +10:00
parent 3d4fa85229
commit a1d108be62
2 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/video-editor/videoPlayback/zoomAnimation.test.ts
+4 -4
View File
@@ -326,9 +326,9 @@ describe("computeRegionStrength", () => {
});
it("falls smoothly during zoom-out", () => {
// Sample the original zoom-out ramp shifted 300ms earlier.
// Sample the zoom-out ramp after the animation delay.
const zoomOutStart = region.endMs - 150;
const s = computeRegionStrength(region, zoomOutStart + 700 - 300);
const s = computeRegionStrength(region, zoomOutStart + 700);
expect(s).toBeGreaterThan(0);
expect(s).toBeLessThan(1);
});
@@ -393,7 +393,7 @@ describe("findDominantRegion", () => {
{ id: "b", startMs: 3500, endMs: 6000, depth: 3, focus: { cx: 0.8, cy: 0.8 } },
];
const result = findDominantRegion(regions, 2800, { connectZooms: true });
const result = findDominantRegion(regions, 3100, { connectZooms: true });
expect(result.transition).toBeNull();
expect(result.region?.id).toBe("a");
expect(result.strength).toBeGreaterThan(0);
@@ -428,7 +428,7 @@ describe("findDominantRegion", () => {
{ id: "b", startMs: 4300, endMs: 7000, depth: 3, focus: { cx: 0.7, cy: 0.7 } },
];
// After transition end (3000-100+1000=3900) but before b starts (4300)
// After transition end (3000+200+1000=4200) but before b starts (4300)
const result = findDominantRegion(regions, 4250, { connectZooms: true });
expect(result.strength).toBe(1);
expect(result.region).not.toBeNull();
src/components/video-editor/videoPlayback/zoomRegionUtils.ts
+7 -7
View File
@@ -11,8 +11,8 @@ import { clamp01, easeOutZoom } from "./mathUtils";
const CHAINED_ZOOM_PAN_GAP_MS = 1350;
const CONNECTED_ZOOM_PAN_DURATION_MS = 1000;
const ZOOM_IN_OVERLAP_MS = 1000;
// Shift the original animation timing 300ms earlier without changing its motion.
const ZOOM_ANIMATION_LEAD_MS = -100;
// Positive offsets delay the animation; this is 300ms later than the previous -100ms offset.
const ZOOM_ANIMATION_DELAY_MS = 200;
type DominantRegionOptions = {
connectZooms?: boolean;
@@ -42,7 +42,7 @@ export function computeRegionStrength(
) {
const zoomInDurationMs = Math.max(1, options.zoomInDurationMs ?? ZOOM_IN_TRANSITION_WINDOW_MS);
const zoomOutDurationMs = Math.max(1, options.zoomOutDurationMs ?? TRANSITION_WINDOW_MS);
const adjustedTimeMs = timeMs - ZOOM_ANIMATION_LEAD_MS;
const adjustedTimeMs = timeMs - ZOOM_ANIMATION_DELAY_MS;
const leadInStart = region.startMs + ZOOM_IN_OVERLAP_MS - ZOOM_IN_TRANSITION_WINDOW_MS;
let zoomOutStart = region.endMs - ZOOM_OUT_EARLY_START_MS;
let zoomInEnd = leadInStart + zoomInDurationMs;
@@ -92,9 +92,9 @@ function getConnectedRegionPairs(regions: ZoomRegion[]) {
pairs.push({
currentRegion,
nextRegion,
transitionStart: currentRegion.endMs + ZOOM_ANIMATION_LEAD_MS,
transitionStart: currentRegion.endMs + ZOOM_ANIMATION_DELAY_MS,
transitionEnd:
currentRegion.endMs + ZOOM_ANIMATION_LEAD_MS + CONNECTED_ZOOM_PAN_DURATION_MS,
currentRegion.endMs + ZOOM_ANIMATION_DELAY_MS + CONNECTED_ZOOM_PAN_DURATION_MS,
});
}
@@ -118,7 +118,7 @@ function getActiveRegion(
const zoomOutStart =
outgoingPair.currentRegion.endMs -
ZOOM_OUT_EARLY_START_MS +
ZOOM_ANIMATION_LEAD_MS;
ZOOM_ANIMATION_DELAY_MS;
if (timeMs >= zoomOutStart) {
return { region, strength: 1 };
}
@@ -133,7 +133,7 @@ function getActiveRegion(
const nextRegionZoomOutStart =
incomingPair.nextRegion.endMs -
ZOOM_OUT_EARLY_START_MS +
ZOOM_ANIMATION_LEAD_MS;
ZOOM_ANIMATION_DELAY_MS;
if (timeMs < nextRegionZoomOutStart) {
return { region, strength: 1 };
}